多亏了 SO 社区的一些大力帮助,我有了一个使用ui-router库使用多个状态/视图的工作角度 SPA。但是,我得到的行为似乎与angular-ui-router
文档不一致。
从他们关于onEnter的文档中,我希望无论何时我使用$state.go("home")
,onEnter()
与该状态的配置对象相关的事件都会启动,但我没有看到它发生。例子:
/* myApp module */
var myApp = angular.module('myApp', ['ui.router'])
.config(['$stateProvider', function ($stateProvider) {
$stateProvider.state('home', {
url: "/",
views: {
'top': {
url: "",
template: '<div>top! {{topmsg}}</div>',
controller: function ($scope) {
$scope.topmsg = "loaded top!";
console.log("top ctrl!");
},
onEnter: function () {
console.log("entered bottom state's onEnter function");
}
},
'middle': {
url: "",
template: '<div>middle! {{middlemsg}}</div>',
controller: function ($scope) {
$scope.middlemsg = "loaded middle!";
console.log("middle ctrl!");
},
onEnter: function () {
console.log("entered bottom state's onEnter function");
}
},
'bottom': {
url: "",
template: '<div>bottom! {{bottommsg}}</div>',
controller: function ($scope) {
$scope.bottommsg = "loaded bottom!";
console.log("bottom ctrl!");
},
onEnter: function () {
console.log("entered bottom state's onEnter function");
}
}
},
onEnter: function () {
console.log("entered home state");
}
});
}])
.controller('MyAppCtrl', function ($scope, $state/*, $stateParams*/) {
$scope.statename = $state.current.name;
$scope.testmsg = "app scope working!";
console.log("MyAppCtrl initialized!");
$state.go("home");
});
正如您从onEnter()
状态配置对象中的所有调用中看到的那样,我的期望是当主状态加载时,我会开始看到他们正在触发控制台消息的所有状态/视图的列表。但是,只有第一entered home state
条消息被记录,来自home
状态的onEnter
事件。没有一个其他视图onEnter
被击中。我误读了文档吗?
这是一个期待已久的小提琴来演示。只需在 firebug/chrome devtools 中显示控制台,您就会看到缺少控制台输出。
任何帮助都会很棒。我正在使用 angular 1.2 和 ui-router 0.2.0。提前致谢!