如何動態禁用Angular指令？

我正在使用AngularJS（HTML5/CSS3）開展一個項目。在我的項目的主要html文件中，有一個表格使用控制器數組填充dinamically：該控制器管理包含該表格的html頁面的部分。如何動態禁用Angular指令？

表的HTML代碼是這樣的：

<table class="col-md-12 col-sm-12 col-lg-12 display" id="tableIdProcedures"> 
<thead> 
    <tr> 
     <th><span>CODE</span></th> 
     <th><span>DESCRIPTION</span></th> 
     <th><span>QUANTITY</span></th> 
     <th><span>NOTE</span></th> 
    </tr> 
</thead> 
<tbody> 
    <tr ng-repeat="procedure in procedures">    
     <td>{{procedure.codExamination}}</td> 
     <td>{{procedure.descrExamination}}</td> 
     <td contenteditable="true">{{procedure.quantityExamination}}</td> 
     <td>{{procedure.noteExamination}}</td> 
    </tr> 
</tbody>

該表是從控制器正確填寫。現在，問題是：如果按下頁面的特定按鈕，我想禁用表格每行第三個單元格中的「contenteditable」指令，使該字段不再可編輯。如何禁用JavaScript代碼中的Angular指令？因此，如果我想重新啓用這些字段，我該如何繼續？

爲了更好地理解了「CONTENTEDITABLE」指令，在這裏我複製其代碼：

(function() { 
'use strict'; 

angular.module('contenteditable', []) 

     .directive('contenteditable', function($location) { 
      return { 
      require: 'ngModel', 
      link: function(scope, element, attrs, ngModel) { 

       element.bind('blur change', function() { 
       scope.$apply(function() { 
        ngModel.$setViewValue(element.html()); 
        // element.html contain the value modified 
        if($('#drugsSection').hasClass('ng-hide') === true){ 
         // procedures active 
         calculateQuantityProcedures(); 
        }else{ 
         // drugs active 
         calculateQuantityDrugs(); 
        } 
       }); 
       }); 

       ngModel.$render = function() { 
       element.html(ngModel.$viewValue); 
       }; 
      } 
      } 
     }) 
}());

預先感謝您的幫助。

來源

2015-04-01 user140888

價值？ – 2015-04-01 14:53:51

在您的td with directive中嘗試ng-disabled =「isDisabled」，然後在按鈕上切換此按...此處示例：https：//docs.angularjs.org/api/ng/directive/ngDisabled – vidriduch 2015-04-01 14:54:06

你可以這樣做：

當按下按鈕，就可以將contenteditable設置在DOM假。所以

<td contenteditable="false">{{procedure.quantityExamination}}</td>

在你的指令

現在：

綁定$手錶，您可以創建這樣的plnkr的contenteditable

link: function(scope, element, attrs, ngModel) { 

    scope.$watch(attrs.contenteditable, function(newval, oldval) { 
     // unbind the events and disable the directive if its false 
    });  
    }

來源

2015-04-01 14:54:04 mohamedrias

因此，我繼續（例如）node.attr（「contenteditable」，「false」）;使用簡單的JavaScript設置它爲false？ – user140888 2015-04-01 15:09:34

是的，這將工作。如果你打算通過jQuery來做，請記住使用$ scope。$ apply（）; – mohamedrias 2015-04-01 15:11:02

它的工作原理，謝謝！ – user140888 2015-04-01 15:36:51

如何動態禁用Angular指令？

回答

相關問題