我正在尝试做什么: 我正在使用 Angular UI-Router 构建一个单页应用程序。我的其中一个页面有一个折线图,所以我使用 angular-chart.js .
我不明白的地方: 我不明白如何让图表显示在 UI 路由器状态中。如果我不将图表包含到单页应用程序中,我可以让图表正常工作。我感觉我需要向包含 $scope 标签、系列和数据的 UI-Router 状态添加一个 Controller ,但我无法让它正常工作。
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 代码中,您没有包含 Controller 。应该是:
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();
}
}
}
}
});
});
你的 Controller 应该是这样的:
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);
};
}]);
关于javascript - 如何将 Angular-Chart.JS 数据添加到 UI-Router .State Controller 中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31772004/