如何动态禁用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指令？

回答

相关问题