Question

我正在使用AngularJS（HTML5 / CSS3）开展项目。在我的项目的主要html文件中，有一个表格，我使用控制器数组填充：这个控制器管理包含表格的html页面部分。

表的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>

从控制器正确填充表格。现在，问题是：如果它按下了页面的特定按钮，我想禁用＆＃34; contenteditable＆＃34;来自表格每行第三个单元格的指令，使该字段不再可编辑。如何在javascript代码中禁用一个Angular指令？因此，如果那时我想重新启用这些字段，我该如何处理？

为了更好地理解＆＃34; contenteditable＆＃34;指令，在这里我复制它的代码：

(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);
              };
            }
          }
        })  
}());

提前感谢您的帮助。

Answer 1

你可以这样做：

按下按钮后，您可以在DOM中将contenteditable设置为false。所以

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

现在在你的指令中：

绑定$ watch以获取contenteditable

的值

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

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

如何动态禁用Angular指令？

1 个答案: