【发布时间】：2015-07-29 23:42:29
【问题描述】：
我在获取更新视图的指令时遇到了一些问题。
在我的控制器中，我为<tiki-list> 指令的属性设置了初始值。然后，2 秒后，我将更新 vm.listObjectSelected 以测试其异步行为。
但是，视图并未反映更新。
控制器：
var listObject = [{"display":"display1", "value":"value1"}, {"display":"display2", "value":"value2"}, {"display":"display3", "value":"value3"}]
vm.listObject = listObject
vm.listObjectSelected = [{"display":"display1", "value":"value1"}]
$timeout(function(){
vm.listObjectSelected = [{"display":"display1", "value":"value1"}, {"display":"display3", "value":"value3"}]
}, 2000)
HTML
<tiki-list max="" type="multi" list="editController.listObject" selected="editController.listObjectSelected"></tiki-list>
指令
(function(){
'use strict';
angular.module("tiki").directive("tikiList", tikiList)
function tikiList(helper){
var directive = {
restrict:"EA",
scope:{
list: "=", //the object to repeat over, this contains 2 array's
retunObject: "=", //the array that is outputted
selected: "=", //preselected values
max: "=", //maximum range, other elements are greyed out, starts at 0
title:"@title", //the title of this list
type:"@type", //[single, multi]
},
templateUrl:"js/directive/list.html",
link:link,
bindToController: true,
controllerAs:"vm",
controller:controller
}
return directive
function link(scope, el, attr, ctrl){
scope.vm.onClick = onClick
// preprocess the "list" if there is a "selected" attribute
// the "selected" attribute is an object that contains the selected items
// return a "selectedItems" array containing the indeces of matching display names
// add the .active property to the "list" object to the correct indeces
if(scope.vm.selected){
var selectedItems = helper.isItemInList(helper.createArrayFromProperty(scope.vm.selected, "display"), helper.createArrayFromProperty(scope.vm.list, "display"))
for(var i = 0; i < selectedItems.length; i++){
scope.vm.list[selectedItems[i]].active = true
}
}
// add the property .disabled to the "list" if there is a max attribute
// the property will be added to all indeces that exceed the max value
if(scope.vm.max){
for(var y = 0; y < scope.vm.list.length; y++){
if(y >= scope.vm.max){
scope.vm.list[y].disabled = true
}
}
}
function onClick(index){
// only allow items that are in range of the "max" attribute are allowed to be clicked
if(!scope.vm.max || index < scope.vm.max){
if(scope.vm.type === "single"){
angular.forEach(scope.vm.list, function(val, key){
scope.vm.list[key].active = false
})
scope.vm.list[index].active = true
}
if(scope.vm.type === "multi"){
scope.vm.list[index].active = !scope.vm.list[index].active
}
}
}
scope.vm.listing = scope.vm.list
}
}
controller.$inject = [];
function controller(){
}
})()
指令模板
<ul class="listOptions">
<li class="listOptions-title" ng-class="{'show':title}">{{vm.title}}</li>
<li ng-click="vm.onClick($index)" ng-class="{'active':list.active, 'disabled':list.disabled}" ng-repeat="list in vm.listing track by $index">{{list.display}}</li>
</ul>
我认为它与 controllerAs 有关，但我无法理解它。
谢谢，
【问题讨论】：
-
你为什么总是使用
scope.vm？如果您将controllerAs与bindToController结合使用，则可以直接访问this对象上的隔离范围属性，例如this.selected。使用指令定义的bindToController属性，您的隔离作用域的所有属性都会自动绑定到控制器而不是作用域。无需使用scope.vm。 -
我正在使用 scope.vm，因为我正在尝试遵循此样式指南：github.com/johnpapa/angular-styleguide#directives
-
您在
$timeout内所做的事情是在角度摘要循环之外。您需要在vm.listObjectSelected = ...之后在$timout内调用$scope.$digest() -
我认为因为在您的 指令 中，当您将控制器
listObject设置为新数组时，scope.vm.listing和scope.vm.list不会指向相同的引用。因此，尽管scope.vm.list已更新，但您的scope.vm.listing不会更新。只需将您的ng-repeat设置为使用您的scope.vm.list而不是scope.vm.listing，它应该可以工作。 Working fiddle -
我误解了您的控制器中的
listObjectSelected和listObject。您应该使用$watch来注意listObjectSelected的变化。 Working fiddle.
标签： angularjs asynchronous controller directive