Question

问题我一直在努力：

原始问题（仅解决单向绑定）可以在这里找到： Unable to pass/update ngModel from controller to directive

我已经设法从指令内部获取单向绑定到视图工作。但是，如果我想在页面加载时按下选择，例如，我无法获得双向绑定功能。我可以看到第一个指令中的ng-model正在获取数据，但是我尝试使用子指令进行各种范围设置，要么打破它，要么它与以前一样 - 没有。

我有一个基本的$watch函数设置，所以当我将一个简单的对象推入视图中附加到ng-model的绑定时，观察者将$ viewValue分配给指令的范围对象。它执行此操作，并且指令只响应任何现有选择被清除，即使我可以清楚地看到ng-model绑定中的对象分配给ui-select。

以下是监视功能：

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);
};

A Plunker for tinkering

所以预期的行为是：

ui-select中的选择应显示在select中，并且也会传递给视图
点击“更改”按钮，数据应显示在视图中，并传递给ui-select

Answer 1

情况是我在其中有一个带有ui-select的指令。通过指令范围和ui-select范围，我能够从主控制器范围获取数据的方法是在指令的链接函数中将{watch}功能放在ngModel.$viewValue上。

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

应该注意的是，ui-select在它的指令中使用scope: true，因此成为它实例化的任何范围的子节点，这允许你访问它的范围＆＃39;父母$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 Demo

嵌套指令和ui-select中的双向绑定

1 个答案: