我一直在解决的问题:
原始问题(仅解决单向绑定(bind))可以在这里找到: Unable to pass/update ngModel from controller to directive
我已经成功地从指令内部到 View 进行单向绑定(bind)。但是,例如,如果我想在页面加载时推送选择,则无法使双向绑定(bind)发挥作用。我可以看到第一个指令中的 ng-model 正在获取数据,但我尝试了子指令的各种范围设置,要么它破坏了它,要么它执行与之前相同的操作 - 什么都没有。
我设置了一个基本的 $watch
函数,这样当我将一个简单的对象推送到 View 中附加到 ng-model 的绑定(bind)中时,观察器会将 $viewValue 分配给指令的范围对象。它执行此操作,并且指令仅通过清除任何现有选择来响应,即使我可以清楚地看到分配给 ui-select 的 ng-model 绑定(bind)内的对象。
这是 watch 功能:
scope.$watch(function() {
return ngModel.$viewValue;
}, function(newVal) {
console.log(newVal, scope.options);
scope.options.selected = newVal;
});
每当我们与 ui-select 交互时,我都会使用此函数来更新 View (效果很好):
scope.changer = function() {
ngModel.$setViewValue(scope.options.selected);
console.log(scope.options.selected);
};
所以预期的行为是:
- 来自 ui-select 的选择应该显示在选择中,并且也会传递到 View
- 通过单击“更改”按钮,数据应显示在 View 中,并传递给 ui-select
最佳答案
情况是我有一个包含 ui-select 的指令。我能够通过指令范围从主 Controller 范围获取数据并深入到 ui-select 范围的方法是在指令的链接函数中的 ngModel.$viewValue 上放置一个监视函数。
然后,每当发生更改时,我都会将该新值分配给该指令范围内的对象,以便为我保存它。然后我在 ui-select 的链接函数中设置一个监视函数来监视scope.$parent.myVal,这样如果有任何内容从主 Controller 推送到该变量,ui-select 就会看到它。发生这种情况时,我会将新值分配给 $select.selected
,它是 ui-select 指令中所选项目的容器。
应该注意的是,ui-select 在其指令中使用 scope: true
,因此成为它实例化的任何范围的子级,这允许您访问其父级的范围$parent
。
指令的监视功能:
scope.$watch(function() {
return scope.$parent.myVar;
}, function(newVal) {
$select.selected = newVal;
})
要添加到 ui-select 的监视功能:
scope.$watch(function() {
return ngModel.$viewValue;
}, function(newVal) {
scope.myVar = newVal;
})
关于angularjs - 嵌套指令和 ui-select 中的双向绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29741820/