Angularjs ui路由器初始加载时的状态数据

Angularjs ui-router state data on initial load

本文关键字：状态 数据 加载 ui 路由器 Angularjs      更新时间：2023-09-26

我的路线是这样的：

...
.state('some.route', {
    url: '/some/route',
    template: 'someTemplate.html',
    controller: 'SomeCtrl'
    data: {
        title: 'Some Title'
    }
})
...

每条路由都有一个data.title属性。

我也有这样的指令

...
app.directive('titleBar', function($state, $rootScope){
    return {
        restrict: 'AE',
        replace: true,
        link: function(scope, element, attrs){
            scope.title = $state.current.data.title; // On initial load, find data.title and bind it
            $rootScope.$on('$stateChangeStart', function(e, toState){
                scope.title = toState.data.title; // On state change, bind new data.title
            }
        },
        template: '<div class="title-bar"> {{ title }} </div>'
    };
});

当您浏览状态时，该指令运行良好，并绑定适当的标题。

但是当我进行完全刷新时，它不会返回我刷新的状态的正确数据。相反，它会返回一些抽象的基本状态，比如：

console.log($state.current);
>>>> OUTPUT
{
    abstract: true,
    name: "",
    url: "^",
    views: null
}

有什么想法吗？

所以我弄清楚了为什么会发生这种情况，并且仍在努力寻找解决方案。

指令在主布局中，在ui视图之前。因此，当您重新加载页面时，状态显然是根状态，然后在加载视图时更新根状态。

解决方案更新：

我现在使用的不是$on('$stateChangeStart')，而是$on('$viewContentLoaded')。

相关文章：