2

我一直在处理的问题：

可以在此处找到原始问题（仅解决单向绑定）： 无法将 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);
};

用于修补的 Plunker

所以预期的行为是：

  • ui-select 中的选择应显示在选择中，并传递给视图
  • 通过单击“更改”按钮，数据应显示在视图中，并传递给 ui-select
4

1 回答 1

2

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

然后，每当发生更改时，我都会将该新值分配给该指令范围内的对象，以便为我保存它。然后我在 ui-select 的链接函数中设置了一个 watch 函数来观察 scope.$parent.myVal ，这样如果有任何东西从主控制器推送到该变量，ui-select 就会看到它。发生这种情况时，我会将新值分配给$select.selectedui-select 指令中选定项目的容器。

应该注意的是 ui-selectscope: 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;
})

Plunker 演示

于 2015-04-20T18:15:06.150 回答