CODEWITHSUNDEEP
javascriptangularjshtml
user140888
user140888

Reputation: 609

How can I disable dynamically an Angular directive?

I'm working on a project using AngularJS (HTML5/CSS3). In the main html file of my project, there is a table that I fill dinamically using an array of a controller: this controller manages the section of the html page in which the table is contained.

The html code of table is this: 

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

The table is filled correctly from the controller. Now, the problem is this: if it's pressed a particular button of the page, I want to disable the "contenteditable" directive from the third cell of each row of the table, making the field no longer editable. How can I disable dinamically, in javascript code, an Angular directive? And, consequently, if then I want to re-enable these fields, how can I proceed?

For a better understanding of the "contenteditable" directive, here I copy its code:

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

Thank you in advance for help.

Upvotes: 2

Views: 2519

Answers (1)

mohamedrias
mohamedrias

Reputation: 18566

You can do like this:

When the button is pressed, you can set the contenteditable to false in the DOM. so 

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

Now in your directive:

Bind a $watch for the value of contenteditable

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

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

Upvotes: 1

Related Questions