Angular JS ng模型綁定行爲

我正在編寫一個AngularJS指令，並希望將ng-model值綁定到控制器中的一個對象數組。指令鏈接中的$ render會在數組中的任何內容發生更改時觸發。事實上，只有在對數組的引用發生更改時纔會觸發$ render。爲什麼是這個，這是ngModelController的預期行爲？下面Angular JS ng模型綁定行爲

代碼演示了這種行爲，並且在這種提琴：http://jsfiddle.net/HandyManDan/RCctF/

<div ng-app="tryApp"> 
    <div ng-controller="MyCtrl"> 
     <div> Bound in controller: {{modelVals[0].val}}</div> 
     <div> Bound in directive: <span my-dir="" ng-model="modelVals"></span></div> 
     <button ng-click="lftBtn()">Mod deep</button> 
     <button ng-click="rtBtn()">Mod ref</button>   
    </div> 
</div> 

myApp.controller('MyCtrl', function($scope) { 
    $scope.modelVals = [{val:'val init'}]; 
    $scope.lftBtn = function() { 
     $scope.modelVals[0].val = 'val change deep'; 
    }; 

    $scope.rtBtn = function() { 
     $scope.modelVals = [{val:'val change ref'}]; 
    }; 

}); 

myApp.directive('myDir', function() { 
    return { 
     restrict: 'A', 
     priority: 1, 
     require: 'ngModel', 
     link: function(scope, element, attr, ngModel) { 
      ngModel.$render = function() { 
       element.find('*').remove(); 
       var el = angular.element("<span>" + ngModel.$modelValue[0].val + "</span>)"); 
       element.append(el); 
      }; 
     } 
    }; 
});

來源

2014-02-26 HandyManDan

挖成的角源之後，我確定這是有意的行爲。它在這裏有所記載http://docs.angularjs.org/api/ng/directive/select

注意：ngModel比較引用，而不是值。當綁定到一個對象數組時，這很重要。

ngModelController爲綁定到ng-model的值設置了一個觀察器。隨後被解僱的手錶隨後調用$ render。觀察者採取這種形式

$ watch（watchExpression，[listener]）;

這種形式的手錶僅供參考，僅供參考。

要實現此功能，其中指令得到一個事件時，對象值的變化，人們會需要使用這種形式來建立自己的手錶上的NG-模型綁定值：

$腕錶（watchExpression ，[listener]，[objectEquality]）;

將objectEquality設置爲true表示對象值比較。

不幸的是，使用$ watch而不是$ render會繞過ngModelController的格式化程序/驗證程序鏈。

來源

2014-02-27 03:33:30 HandyManDan

嘗試重寫你的指令，像這樣：

myApp.directive('myDir', function() { 
    return { 
     restrict: 'A', 
     priority: 1, 
     scope: { 
      'ngModel': '=' 
     }, 
     template: "<span>{{ngModel[0].val}}</span>" 
    }; 
});

演示：http://jsfiddle.net/qwertynl/RCctF/16/

來源

2014-02-26 19:06:52 qwertynl

這使小提琴的工作，但不是一個正確的答案。 $ render仍然沒有被解僱。 – HandyManDan

@HandyManDan我刪除了代碼中對jQuery附加組件的需求。他們沒有必要。只需使用模板:-)不需要渲染;-) – qwertynl

Angular JS ng模型綁定行爲

回答

相關問題