angularjs - Angular ui-router onEnter 函数未触发

Question

感谢来自 SO 社区的一些大力帮助，我有一个使用 ui-router 使用多个状态/ View 的工作 Angular 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() 中看到的在状态的配置对象中调用，我的期望是当主状态加载时，我会开始看到他们正在触发控制台消息的所有状态/ View 的列表。然而，只有第一个 entered home state正在记录消息，来自 home州的 onEnter事件。没有其他 View 的 onEnter正在被击中。我误读了文档吗？

Here is a long-awaited fiddle展示。只需在 firebug/chrome devtools 中显示控制台，您就会看到缺少控制台输出。

任何帮助都会很棒。我正在使用 angular 1.2 和 ui-router 0.2.0。提前致谢!

Answer 1

两件事情:

onEnter方法适用于状态，而不是 View 。您在定义中有一个状态和 3 个 View ，出于某种原因，您尝试将 URL 附加到您的 View 中。

为了进入一个状态，它首先必须退出。 (A) 你从来没有真正离开过 home状态(因为您只有一个状态定义开始)，因此您永远无法重新输入它。 (B) 看来您实际上是在尝试在 home 中创建子状态.即使您修复了语法，它仍然不起作用，因为当您进入父级的子状态时，通过更改为同一父级内的不同子级状态，您仍然不会真正离开父级状态，因此不会重新 -触发 onEnter .