双向数据绑定停止工作

人们应该记住：

1. Angular 的数据绑定依赖于 JavaScript 的原型继承，因此它受到变量阴影的影响 。
2. 子范围通常原型继承自其父范围。 此规则的一个例外是一个具有独立范围的指令，因为它没有原型继承。
3. 有一些指令可以创建一个新的子范围：ng-repeat，ng-switch，ng-view，ng-if，ng-controller，ng-include 等。

这意味着当你尝试将某些数据双向绑定到子范围内的原语（反之亦然）时，事情可能无法按预期工作。以下是一个 破解 AngularJS 的简单示例。

遵循以下步骤可以轻松避免此问题：

1. 有一个 ”。” 在绑定某些数据时，在 HTML 模板中
2. 使用 controllerAs 语法，因为它促进了对点对象的绑定的使用
3. $ parent 可用于访问父 scope 变量而不是子范围。像 ng-if 里面我们可以用 ng-model="$parent.foo" ..

上面的替代方法是将 ngModel 绑定到 getter / setter 函数，该函数将在使用参数调用时更新模型的缓存版本，或者在不带参数的情况下调用时返回它。要使用 getter / setter 函数，需要将 ng-model-options="{ getterSetter: true }" 添加到具有 ngModal 属性的元素，如果要在表达式中显示其值，则调用 getter 函数（ 工作示例 ）。

例

视图：

<div ng-app="myApp" ng-controller="MainCtrl">
    <input type="text" ng-model="foo" ng-model-options="{ getterSetter: true }">
    <div ng-if="truthyValue">
        <!-- I'm a child scope (inside ng-if), but i'm synced with changes from the outside scope -->
        <input type="text" ng-model="foo">
    </div>
    <div>$scope.foo: {{ foo() }}</div>
</div>

控制器：

angular.module('myApp', []).controller('MainCtrl', ['$scope', function($scope) {
    $scope.truthyValue = true;
      
    var _foo = 'hello'; // this will be used to cache/represent the value of the 'foo' model 
      
    $scope.foo = function(val) {
        // the function return the the internal '_foo' varibale when called with zero arguments,
        // and update the internal `_foo` when called with an argument
        return arguments.length ? (_foo = val) : _foo;
    };
}]);

最佳实践 ：最好保持快速获取，因为 Angular 可能比代码的其他部分（ 参考 ） 更频繁地调用它们。