Question

我的路线是这样的：

...
.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
}

有什么想法吗？

Answer 1

所以我想出了为什么会发生这种情况，我仍在努力寻找解决方案。

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

解决方案更新：

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

Angularjs ui-router初始加载状态数据

1 个答案: