angularjs - Angular 引导(标签): data binding works only one-way

Question

我准备了一个小 fiddle 并将其归结为最低限度:

http://jsfiddle.net/lpeterse/NdhjD/4/

<script type="text/javascript">
    angular.module('app', ['ui.bootstrap']);

    function Ctrl($scope) {
      $scope.foo = "42";
}
</script>


<div ng-app="app" ng-controller="Ctrl">
    1: {{foo}}<br />
    2: <input ng-model="foo" />
    <tabs>
        <pane heading="tab">
            3: {{foo}}<br />
            4: <input ng-model="foo" />
        </pane>
    </tabs>    
</div>

一开始，所有 View 都引用模型 Ctrl.foo .

如果您更改输入中的某些内容 2:它会正确更新模型，并且此更改会传播到所有 View 。

更改输入中的内容 4:只影响包含在同一 Pane 中的 View 。它的行为就像范围以某种方式 fork 。之后从 2: 更改不再反射(reflect)在选项卡中。

我阅读了有关指令、范围和嵌入的 angular 文档，但找不到对这种不良行为的解释。

我将不胜感激任何提示:-)

Answer 1

当您编辑基元时，问题与 ng-repeat 中的相同 - <pane>指令创建一个从父级继承的新范围。

现在，考虑到 Javascript 继承的工作方式 <pane>指令有自己的 foo 副本字符串原语，当您编辑它时，您只是在 Pane 子范围内编辑它。

一个简单的解决方案是放置 foo在父 Ctrl 上的对象中:

function Ctrl($scope) {
  $scope.data = { foo: 42 };
}

然后你可以在你的 HTML 中做到这一点:

<tabs><pane><input ng-model="data.foo"></pane></tabs>

为什么它与对象一起工作？因为当 <pane>继承父级的作用域，它对 data 的引用将在内存中引用与父 Ctrl 上相同的对象。像字符串和数字这样的原语在继承中被复制，对象只是创建一个指向同一个对象的新指针。

TL;博士: <pane>的新作用域继承了 foo字符串原语作为 foo 的新副本编辑时不会在父 Ctrl 上更改。 <pane>的新范围 会 继承像 data 这样的对象作为对同一对象的引用，并在 <pane> 上编辑时scope 将在父作用域上引用相同的对象。

有用的文章: https://github.com/angular/angular.js/wiki/The-Nuances-of-Scope-Prototypal-Inheritance