嵌套指令和 ui 选择中的双向绑定



我一直在研究的问题:

原始问题(仅解决单向绑定)可以在此处找到: 无法将 ngModel 从控制器传递/更新到指令

我已经设法将单向绑定从指令内部扩展到视图工作。 但是,例如,如果我想在页面加载时推送选择,则无法使双向绑定起作用。 我可以看到第一个指令中的 ng-model 正在获取数据,但我用子指令尝试了各种范围设置,要么它破坏了它,要么它做了与以前相同的事情 - 什么都没有。

我设置了一个基本的$watch函数,因此当我将一个简单的对象推送到附加到视图中的 ng-model 的绑定中时,观察者会将$viewValue分配给指令的范围对象。 它这样做,并且该指令仅通过清除任何现有选择来响应,即使我可以清楚地看到分配给 ui-select 的 ng-model 绑定中的对象。

这是手表功能:

scope.$watch(function() {
return ngModel.$viewValue;
}, function(newVal) {
console.log(newVal, scope.options);
scope.options.selected = newVal;
});

每当我们与 ui-select 交互时,我都会使用此函数更新视图(工作正常):

scope.changer = function() {
ngModel.$setViewValue(scope.options.selected);
console.log(scope.options.selected);
};

用于修补的普朗克

因此,预期的行为是:

  • 来自 UI-Select 的选择应显示在选择中,并传递给视图
  • 通过单击"更改"按钮,数据应显示在视图中,并传递给UI-SELECT

情况是我有一个带有 ui-select 的指令。 我能够通过指令作用域从主控制器作用域获取数据并向下获取 ui-select 作用域的方法是在指令的链接函数中ngModel.$viewValue放置一个监视函数。

然后,每当有更改时,我都会将该新值分配给该指令范围内的对象,以便为我保存它。 然后我在 ui-select 的链接函数中设置了一个监视函数来监视 scope.$parent.myVal,这样如果有任何内容从主控制器推送到该变量,ui-select 将看到它。 发生这种情况时,我会将该新值分配给$select.selectedui-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;
})

普伦克演示

相关内容

  • 没有找到相关文章

最新更新