angular-bootstrap(tabs):数据绑定仅适用于单向

Question

我准备了一个小提琴并将其煮至最低限度:

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>

在开始时,所有视图都参考模型Ctrl.foo.

如果您在输入中更改某些内容,2:则会正确更新模型,并且此更改会传播到所有视图.

更改输入中的内容4:只会影响同一窗格中包含的视图.它的行为类似于以某种方式分叉的范围.之后的变化2:不再反映在标签中.

我阅读了有关指令,范围和转换​​的角度文档,但无法找到对此不良行为的解释.

我会很感激任何提示:-)

Answer 1

编辑基元时,问题与ng-repeat中的问题相同 - 该<pane>指令创建一个从父项继承的新范围.

现在,考虑到Javascript继承的工作方式,该<pane>指令有自己的foo字符串原语副本,当您编辑它时,您只在窗格子范围上编辑它.

一个简单的解决方案是foo在父Ctrl上输入一个对象:

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

然后你可以在HTML中执行此操作:

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

为什么它适用于对象？因为当<pane>继承父级的作用域时,它的引用data将引用内存中与父Ctrl相同的对象.字符串和数字等原语在继承中复制,对象只是创建一个指向同一对象的新指针.

TL; DR:<pane>新的作用域继承了foo字符串原语作为新副本foo,当编辑时,它不会在父Ctrl上更改.<pane>新的作用域将继承一个对象,就像data对同一对象的引用一样,当在<pane>作用域上编辑时,同一对象将在父作用域上被引用.

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