How can I disable dynamically an Angular directive?

Question

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.

try ng-disabled="isDisabled" in your td with directive and then just toggle this on button press ... example here: docs.angularjs.org/api/ng/directive/ngDisabled — vidriduch
– vidriduch, Commented Apr 1, 2015 at 14:54

mohamedrias · Accepted Answer · 2015-04-01 14:54:04Z

1

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

answered Apr 1, 2015 at 14:54

mohamedrias

18.6k3 gold badges41 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user140888 Over a year ago

So, I proceed with (for example) node.attr("contenteditable","false"); setting it false with simple javascript?

mohamedrias Over a year ago

Yes, that would work. if your going to do it via jquery remember to use $scope.$apply();

Collectives™ on Stack Overflow

How can I disable dynamically an Angular directive?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related