[英]How do I add Angular-Chart.JS data into UI-Router .State Controller?
What I'm attempting to do: I'm building a single-page app using Angular UI-Router. 我正在尝试做的事情:我正在使用Angular UI-Router构建一个单页应用程序。 One of my pages has a line chart so I am using angular-chart.js .
我的其中一页上有一个折线图,所以我正在使用angular-chart.js 。
What I don't understand: I don't understand how to get the charts to show inside the UI-Router state. 我不了解的内容:我不了解如何使图表显示在UI-Router状态内。 I can get the graph to work if I don't include it into a single-page app.
如果不将其包含在单页应用程序中,则可以使该图表起作用。 I have a feeling I need to add a controller to the UI-Router state containing the $scope labels, series and data, but I haven't been able to get it to work properly.
我感觉我需要向UI-Router状态添加一个包含$ scope标签,系列和数据的控制器,但是我无法使其正常工作。
Angular-Chart.js Code 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-Router Code 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'
});
});
In your javascript code, you did not include the controller. 在您的JavaScript代码中,您未包含控制器。 It should be:
它应该是:
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'
});
});
Although, there is a better way than this. 虽然,有比这更好的方法。 You could resolve the data coming from a service so that the page would wait for that data before it shows the compiled html.
您可以解析来自服务的数据,以便页面在显示编译的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();
}
}
}
}
});
});
And your controller should look like this: 您的控制器应如下所示:
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);
};
}]);
I couldn't get Immanuel's code to work for me, but he led me on the right track to use views. 我无法让Immanuel的代码为我工作,但他带领我走上了使用视图的正确道路。 I read up on multiple views using UI Router from this link: https://scotch.io/tutorials/angular-routing-using-ui-router .
我通过以下链接使用UI Router阅读了多个视图: https : //scotch.io/tutorials/angular-routing-using-ui-router 。 Almost immediately, I was able to get it to work.
几乎立即,我就能使它正常工作。
The charts.html page called the ui-view: 称为ui视图的chart.html页面:
<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>
My app.js code: 我的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'
}
}
})
});
Then I called the controller for each. 然后我给每个控制器打电话。 Here is the line chart:
这是折线图:
// 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]
];
});
And that was it! 就是这样!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.