Как добавить данные Angular-Chart.JS в UI-Router .State Controller?

Что я пытаюсь сделать: я создаю одностраничное приложение с помощью Angular UI-Router. На одной из моих страниц есть линейная диаграмма, поэтому я использую angular-chart.js.

Чего я не понимаю: я не понимаю, как заставить диаграммы отображаться в состоянии UI-Router. Я могу заставить график работать, если не включу его в одностраничное приложение. У меня есть ощущение, что мне нужно добавить контроллер в состояние UI-Router, содержащее метки, серии и данные $scope, но я не смог заставить его работать должным образом.

Код Angular-Chart.js

var chartApp = angular.module('myApp', ['chart.js']);

chartApp.controller("LineCtrl", function ($scope) {
    'use strict';   
    $scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
    $scope.series = ['Motivation', 'Workload'];
    $scope.data = [
        [65, 59, 80, 81, 56, 55, 40],
        [28, 48, 40, 19, 86, 27, 90]
    ];
    $scope.onClick = function (points, evt) {
        console.log(points, evt);
    };
});

Код UI-маршрутизатора

var myApp = angular.module('myApp', ['ui.router']);

myApp.config(function($stateProvider, $urlRouterProvider) {
    'use strict';

    // For any unmatched url, redirect home
    $urlRouterProvider.otherwise('/home');

    $stateProvider

    // chart page
    .state('charts', {
        url: '/charts',
        templateUrl: 'app/charts.html'
    });
});

javascript charts angularjs angular-ui-router angular-chart
person Phil Jefferies    schedule 02.08.2015    source источник
comment
Да, экземпляр контроллера должен быть создан в шаблоне диаграммы либо с помощью ng-init, либо путем добавления его в состояние.   -  person Olatunde Garuba    schedule 02.08.2015

Ответы (2)


arrow_upward
1
arrow_downward

В вашем коде javascript вы не включили контроллер. Должен быть:

var myApp = angular.module('myApp', ['ui.router']);

myApp.config(function($stateProvider, $urlRouterProvider) {
    'use strict';

    // For any unmatched url, redirect home
    $urlRouterProvider.otherwise('/home');

    $stateProvider

    // chart page
    .state('charts', {
        url: '/charts',
        templateUrl: 'app/charts.html'
        controller: 'LineCtrl'
    });
});

Хотя, есть лучший способ, чем этот. Вы можете разрешить данные, поступающие от службы, чтобы страница ждала этих данных, прежде чем отображать скомпилированный html.

var myApp = angular.module('myApp', ['ui.router', 'someService']);

myApp.config(function($stateProvider, $urlRouterProvider) {
    'use strict';

    // For any unmatched url, redirect home
    $urlRouterProvider.otherwise('/home');

    $stateProvider

    // chart page
    .state('charts', {
        url: '/charts',

        //I use the 'views' property to ready my code for nested views as well as to
        //isolate the properties for each view on that particular url
        views: {
            '':{
                templateUrl: 'app/charts.html',
                controller: 'LineCtrl',
                controllerAs: 'lineCtrl',
                resolve:{
                    labels: function(someService){
                        return someService.getAllLabels();
                    },
                    series: function(someService){
                        return someService.getAllSeries();
                    },
                    data: function(someService){
                        return someService.getAllData();
                    }
               }
            }
        }
    });
});

И ваш контроллер должен выглядеть так:

var chartApp = angular.module('myApp', ['chart.js']);

chartApp.controller("LineCtrl", ['$scope', 'labels', 'series', 'data', function ($scope, labels, series, data) {
    'use strict';   
    $scope.labels = labels;
    $scope.series = series;
    $scope.data = data;
    $scope.onClick = function (points, evt) {
        console.log(points, evt);
    };

}]);
person Immanuel Rosal    schedule 02.08.2015
comment
Иммануил, спасибо за понимание. Я не думал использовать представления. Это позволило бы мне создавать несколько графиков и вызывать их из HTML с помощью <div ui-view=""></div>, верно? Я попробую. - person Phil Jefferies; 02.08.2015

arrow_upward
0
arrow_downward

Я не мог заставить код Иммануэля работать на меня, но он привел меня на правильный путь к использованию представлений. Я читал о нескольких представлениях с использованием UI Router по этой ссылке: https://scotch.io/tutorials/angular-routing-using-ui-router. Почти сразу я смог заставить его работать.

Страница charts.html, называемая ui-view:

<div class="row"> <div class="col-md-6 col-sm-12" id="line-chart" ui-view="line-chart"></div> <div class="col-md-6 col-sm-12" id="bar-chart" ui-view="bar-chart"></div> </div> <div class="row"> <div class="col-md-6 col-sm-12" id="doughnut-chart" ui-view="doughnut-chart"></div> <div class="col-md-6 col-sm-12" id="radar-chart" ui-view="radar-chart"></div> </div>

Мой код app.js:

var myApp = angular.module('myApp', ['ui.router', 'chart.js']);
myApp.config(function($stateProvider, $urlRouterProvider) {
    'use strict';

    // For any unmatched url, redirect home
    $urlRouterProvider.otherwise('/home');

    $stateProvider

    // charts page
    .state('charts', {
        url: '/charts',
        views: {
            '': { templateUrl: 'app/charts.html', },
            'line-chart@charts': {
                templateUrl: 'app/charts-line.html',
                controller: 'lineController'
            },
            "bar-chart@charts": {
                templateUrl: 'app/charts-bar.html',
                controller: 'barController'
            },
            "doughnut-chart@charts": {
                templateUrl: 'app/charts-doughnut.html',
                controller: 'doughnutController'
            },
            "radar-chart@charts": {
                templateUrl: 'app/charts-radar.html',
                controller: 'radarController'
            }
        }
    })
});

Затем я позвонил диспетчеру для каждого. Вот линейный график:

// Define the charts controller called from the charts state
myApp.controller('lineController', function($scope) {
    'use strict';
    $scope.message = 'There should be a line chart here:';
    $scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
    $scope.series = ['Motivation', 'Workload'];
    $scope.data = [
        [65, 59, 80, 81, 56, 55, 40],
        [28, 48, 40, 19, 86, 27, 90]
    ];
});

И это было!

person Phil Jefferies    schedule 03.08.2015