如何将Angular-Chart.JS数据添加到UI-Router . state Controller中?
How do I add Angular-Chart.JS data into UI-Router .State Controller?
我想做的:我正在用Angular UI-Router构建一个单页应用。我的一个页面有一个折线图,所以我使用angular-chart.js。
我不明白的地方:我不明白如何让图表显示在UI-Router状态。如果我不将其包含在单页应用程序中,我可以让图形工作。我有一种感觉,我需要向包含$scope标签,系列和数据的UI-Router状态添加控制器,但我无法使其正常工作。
<<p> Angular-Chart.js代码/strong>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);
};
});
<<p> UI-Router代码/strong> 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代码中,你没有包含控制器。应该是:
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);
};
}]);
我无法让Immanuel的代码为我工作,但他引导我走上了正确的使用视图的道路。我阅读了多个视图使用UI路由器从这个链接:https://scotch.io/tutorials/angular-routing-using-ui-router。几乎立刻,我就能让它工作了。
图表。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]
];
});
就是这样!
- 混合 ui-sref 和 $state.go 在 Angular ui-router 中进行状态转换
- AngularJS ui-router 使用 $state.params 和查询导航状态
- ui-router:在不使用 $state.go() 的情况下重置$state
- Angular UI Router$urlRouterProvider.when处理程序结果被$state忽略
- Angular + ui-router :: on state complete callback
- 当使用$state时,ui-router中的双状态改变.进入$stateChangeStart
- 如何管理ui-router或在不同的$state中共享$scope
- 当你在angular ui-router中处于相同状态时,重载state
- Angular ui-router $state.reload()无法在文件上传后更新作用域变量
- 如何通过state.js传递一个值(我从ui-router得到)到一个模态/视图
- ui-router state url issue
- Angular UI Router 1.0——为什么在不离开state的情况下调用$scope.$watch('
- 如何将Angular-Chart.JS数据添加到UI-Router . state Controller中?
- Angular UI-Router: $state.电流有时是未定义的
- Ui-router - $state.go()不起作用
- 在IFrame中使用angular的ui-router $state.go()
- 角度 ui.router 无限循环$state或$location变化
- 角的Ui.router $state template ng-models都是$rootScope
- Angular UI Router - "无法解析state"与参数
- AngularJS / UI Router - Locale in State URL / TemplateURL