4

多亏了 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。提前致谢!

4

2 回答 2

20

两件事情:

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

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

于 2014-02-03T02:24:15.353 回答
1

我用了

 $state.reload();

在我的情况下触发承诺响应的更新来解决这个问题。你也可以做

$state.reload()
$state.go("statename")

我就是这样解决的。

见这里:https ://github.com/angular-ui/ui-router/wiki/Quick-Reference#statereload

于 2017-03-16T15:17:44.487 回答