我使用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>