雙向資料繫結停止工作

人們應該記住：

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 可能比程式碼的其他部分（ 參考 ） 更頻繁地呼叫它們。