AngularJS：在$手錶功能

改變一個模式，我有一個指令，像這樣：

.directive('checkMeIfApplyAll', function($timeout) { 
    return { 
     link: function(scope, element, attrs) { 
      scope.$watch(attrs.checkMeIfApplyAll, function(value) { 
       debugger; 
       if(value === true) { 
        element.prop('checked', true); 
       } 
       else { 
        element.prop('checked', false); 
       } 
      }); 
     } 
    };

這裏是相應的HTML片段：

<tr 'ng-repeat'='permission in category.permissions'> 
    <input type='checkbox' 'ng-model'='permission.show' 'check-me-if-apply-all'= 'category.allChecked'> 
</tr>

注意類別如果值。 allChecked更改，觀察者功能被觸發。正如你所看到的，如果這個值是真的，那麼使用jQuery，我可以檢查複選框。但是，正如你在html代碼片段中看到的那樣，每個複選框都被分配了一個模型，例如'permission.show'。而我真正想要做的是改變指令中的模型的值，而不是簡單地指定元素的屬性。如何訪問watch函數內部元素的ng-model屬性？

來源

2014-07-18 sq1020

您可以使用ngModelController：

.directive('checkMeIfApplyAll', function($timeout) { 
    return { 
     require: 'ngModel', 
     link: function(scope, element, attrs, ngModel) { 
      scope.$watch(attrs.checkMeIfApplyAll, function(value) { 
       debugger; 
       if(value === true) { 
        element.prop('checked', true); 
       } 
       else { 
        element.prop('checked', false); 
       } 

       // Set value like this 
       ngModel.$setViewValue(value); 
      }); 
     } 
    };

來源

2014-07-18 19:26:02 Bogdan

這工作完美，但我想用ngModel。$ setViewValue（value），我不需要使用jquery檢查或取消選中複選框之前的代碼。但是，更改模型值似乎並不會影響複選框，即使它們綁定到該屬性。任何想法爲什麼？ – sq1020

你是指你有'ngModel'綁定的複選框嗎？你想要檢查'permission.show'的值是否爲true，或者你有其他依賴於模型值的元素嗎？也許你可以發佈更多的代碼，以便更好地瞭解你所要達到的目標。 – Bogdan

所以我意識到，當你調用$ setViewValue（value）時，模型會得到更新，但DOM不會讓複選框保持原樣。您需要添加ngModel。$ render（）以便更新DOM。我相應地更新了你的答案。謝謝！ – sq1020

讓我們去簡單。我認爲你不需要指示，$ watch不應被過度使用。

<tr ng-repeat='permission in category.permissions'> 
    <input type='checkbox' ng-model='permission.show' 
    ng-checked='category.allChecked'> 
</tr>

要訪問模型的指令，只需訪問scope.category.permissions[INDEX].show

我沒有測試上面，因爲沒有提供plnkr。

來源

2014-07-18 19:25:26 allenhwkim

我以前試過，但如果通過某個用戶操作category.allChecked變化，permission.show模式不更新，即使DOM即複選框是。查看http://stackoverflow.com/questions/16601018/angularjs-ng-model-not-binding-to-ng-checked-for-checkboxes – sq1020

AngularJS：在$手錶功能

回答

相關問題