雙向資料繫結停止工作

人們應該記住:

  1. Angular 的資料繫結依賴於 JavaScript 的原型繼承,因此它受到變數陰影的影響
  2. 子範圍通常原型繼承自其父範圍。 此規則的一個例外是一個具有獨立範圍的指令,因為它沒有原型繼承。
  3. 有一些指令可以建立一個新的子範圍:ng-repeatng-switchng-viewng-ifng-controllerng-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 可能比程式碼的其他部分( 參考 ) 更頻繁地呼叫它們。