考虑初始应用 main 状态：
$stateProvider.state('main', {
url: '',
views: {
'nav@': {
templateUrl: baseTemplatesUrl + 'nav.main.html',
controllerAs: 'vm',
controller: 'mainNavController',
resolve: {
timelinesService: 'timelinesService'
}
},
'content@': {
template: ''
}
}
});
在 nav.main.html 模板中，我正在尝试使用简单的滑块指令：
<ul>
<li ng-repeat="t in vm.timelines">
<!-- ui-sref=".timeline({yearFrom: t.yearFrom, yearTo: t.yearTo})" -->
<a class="button tiny" ui-sref-active="active">{{t.text}}</a>
</li>
</ul>
<div simple-slider items="vm.timelines" on-item-clicked="vm.timelineClicked"></div>
该指令定义为：
function simpleSlider() {
return {
restrict: 'EA',
templateUrl: baseTemplatesUrl + 'directive.simpleSlider.html',
replace: true,
scope: {
items: '=',
onItemClicked: '&'
},
link: function(scope, el, attr, ctrl) {
scope.curIndex = 0;
scope.next = function() {
scope.curIndex < scope.items.length - 1 ? scope.curIndex++ : scope.curIndex = 0;
};
scope.prev = function() {
scope.curIndex > 0 ? scope.curIndex-- : scope.curIndex = scope.items.length - 1;
};
scope.$watch('curIndex', function() {
scope.items.forEach(function(item) {
item.active = false;
});
scope.items[scope.curIndex].active = true;
});
},
};
}
问题
在页面加载时，指令$watch会抛出一个异常，说 scope.items[scope.curIndex] 未定义，而 {{1} nav.main.html 模板内成功渲染。。
为什么手表失败/如何将 ng-repeat="t in vm.timelines" 传递给指令的范围？
小提琴
https://jsfiddle.net/challenger/Le5p9aup/
更新1.关于@Lex回答
小提琴正在发挥作用。但我的设置与给定的小提琴不同。在我的设置中， vm.timelines 会返回 $ http承诺：
timelinesService然后在 var service = {
getTimelines: function() {
return $http.get('/api/timelines');
}
};
内填充 navMainController 数组：
vm.timelines然后，除非您单击指令的prev / next按钮，否则$ watch将失败：
vm.timelines = [];
timelinesService.getTimelines().then(function(response) {
vm.timelines = response.data.timelines;
}).catch(function(error) {
console.log(error);
});