Question

有人可以告诉我为什么我无法通过链接功能进行双向绑定吗？

请参阅此插件：http://plnkr.co/edit/RI1ztP?p=preview

以下手表成功将该集合添加到attrs.ngModel但我看不到它反映在父控件中

scope.$watchCollection("selectedItems",function(collection){
    attrs.ngModel = [];
    for(var i=0;i<collection.length;i++){
      attrs.ngModel.push(collection[i]);
    }
    console.log("ngModel",attrs.ngModel);
  });

无法在此处查看该集合（selectedUsers）：

<body ng-controller="mainCtrl">
 <div multi-select-search-box ng-model="selectedUsers" label="name" my-options="state in states"></div>
{{selectedUsers}}

如果你看一下上面的html，我将selectedUsers数组绑定到ng-model。在我的链接功能中，我将所选用户添加到attrs.ngModel数组。当我查看控制台时，selectedUsers被添加到attrs.ngModel但是数组没有反映回html {{selectedUsers}}

Answer 1

绑定到ng-model的{{1}}的数据为multi-select-search-box。

因此，要在DOM中注册更改，您必须更新该变量而不是$scope.selectedUsers。

ng-model

由于scope.$watchCollection("selectedItems",function(collection){ for(var i=0;i<collection.length;i++){ scope.myNgModelVar.push(collection[i]); } });是一个字符串，在其上调用ng-model来将其作为表达式进行评估，因此更新$parse()/$eval()值对您没有任何帮助。

编辑：

经过一些澄清后，似乎这是一个可重复使用的自定义指令。因此，我们不希望在指令中粘贴控制器中的变量。相反，您应该将指令属性绑定到指令范围。

ng-model

尽管您可以使用别名// Directive Def. Object: return { restrict: "AE", scope: { myNgModelVar: "=", bindModel: "=ngModel" //This is the alternate method aliasing ngModel var with a scope var. }, template: "<input ng-model='myNgModelVar' />" };来使用ngModel，但这会为您提供一个与ngModel绑定的隔离范围变量。因此，保持您的指令可重用。

Answer 2

解决方案是要求ng-model控制器并使用viewValue数组同步更改：

scope.$watchCollection("selectedItems",function(collection){
    ctrl.$viewValue.splice(0,ctrl.$viewValue.length);
    for(var i=0;i<collection.length;i++){
      ctrl.$viewValue.push(collection[i]);
    }
  });

和

require: 'ngModel'

链接功能的双向绑定

2 个答案:

编辑：