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

Question

我一直在解决的问题：

原始问题（仅解决单向绑定问题）可在此处找到：

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

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

所以预期的行为是：

select 离子应显示在 select 中，并传递给视图
通过单击 'Change' 按钮，数据应显示在视图中，并传递给 ui-select

Answer 1

情况是我有一个指令，里面有 ui-select。我能够通过指令范围从主控制器范围获取数据并向下到 ui-select 范围的方法是在 link 函数的 ngModel.$viewValue 上放置一个监视函数指示。

然后我将该新值分配给该指令范围内的 object，以便为我保存。然后我在 ui-select 的 link 函数中设置了一个 watch 函数来监视 scope.$parent.myVal 这样如果有任何东西从主控制器被推送到那个变量， ui-select会看到它。发生这种情况时，我会将该新值分配给 $select.selected，这是 ui-select 指令中所选项目的容器。

需要注意的是，ui-select在它的指令中使用了scope: true，因此成为它被实例化的任何范围的child，它允许你访问范围parent 和 $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 中的双向绑定

Two-way binding within nested directives and ui-select

angularjs

angularjs-directive

ui-select