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メッセージのみがログに記録されます。他のビューは 1 つもヒットしていません。ドキュメントを読み間違えていますか？homeonEnteronEnter
これは、デモンストレーションする待望のフィドルです。firebug/chrome devtools でコンソールを表示するだけで、コンソール出力がないことがわかります。
どんな助けでも素晴らしいでしょう。angular 1.2 と ui-router 0.2.0 を使用しています。前もって感謝します！