从UI路由器的解析方法更新控制器上的对象,由$ state.go()调用

时间:2015-03-03 07:40:10

标签: javascript angularjs angular-ui-router watch

我使用UI路由器的resolve对象向控制器添加依赖项(promise)。在初始页面加载时,将按预期解析此问题,并使用来自依赖项的数据填充控制器中的对象。我在视图中使用此对象来输出ng-repeat指令。

在另一个状态中,我有一个添加到模型的函数(在先前状态下得到解决的函数)。添加后,我使用$state.go()将状态转换回上一个状态。

resolve的方法获取模型并将依赖项注入前一个控制器时,我希望ng-repeat输出应该包含新添加的项。但事实并非如此。只有在刷新时才会更新视图。

console.log方法的resolve中,我可以看到正在调用该方法并且已经获取了数据。

我在依赖项上放置$watch以使用新值更新控制器的对象,但不会调用该监视。为什么$watch在明确更改时没有看到依赖项的变化?

路线

angular.module('app')
.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider

    .state('tab', {
        url: "/tab",
        abstract: true,
        templateUrl: "templates/tabs.html"
    })

    .state('tab.queries', {
        url: '/queries',
        views: {
            'tab-queries': {
                templateUrl: 'templates/tab-queries.html',
                controller: 'QueriesCtrl as ctrl'
            }
        },
        resolve: {
            allTemplates: function(Templates) {
                return Templates.all().then(function(templates) {
                    console.log(templates); // This outputs with the correct data every time the state is entered
                    return templates;
                });
            }
        }
    })

    .state('tab.guide', {...}); // controller: GuideCtrl as ctrl
});

QueriesCtrl

function queriesCtrl($scope, allTemplates) {
    var vm = this;
    vm.queries = allTemplates;
    $scope.$watch('allTemplates', function() {
        // Called on first load, not on subsequent state changes
        console.log('templates changed');
        vm.queries = allTemplates;
    });
}

GuideCtrl

function myCtrl($state) {
    var vm = this;
    vm.goToQueries = function() {
        /* -> Code saving to the model here <- */
        $state.go('tab.queries');
    }
}

查看(tab.queries)

<div ng-repeat="query in ctrl.queries">
...
</div>

0 个答案:

没有答案