Dynamically disable a directive with AngularJS

Question

I'm working on a test project using Bootstrap and AngularJS to (try to) make a website for one of our customers. As part of the project, I'm trying to simulate a lot of functionallity that we have in our current programs (Written in Progress Openedge). One of these functionalities is dynamically enable / disable actions depending on a user action (Like selecting another record in a grid, changing values, ...) but I'm having some trouble to get this to work.

I've made a directive to build a menu structure (based on something I found out here...) that uses an array of objects as input. Building the menu works find, I can add click events, ... but adding this disable functionallity is a problem. I've created a plunker to simulate what I'm trying to do (it uses just some buttons instead of a menu to keep it simple) here

In short, I'm trying to add an 'ng-class' attribute when the object has a disable function defined that uses that function to determine if the button should be disabled or not. In this case, when the checkbox is checked or not. When I just add the 'disabled' class it works just fine (but off course, this isn't dynamic).

I suspect I somehow have to use $compile to get this working, but $compile(element)(scope); doesn't seem to work.

So, what am I doing wrong? How can I get this to work?

As a side note, I'm rather new to Javascript / HTML / AngularJS so if I'm making some stupid mistake, feel free to point it out... ;-)

Thanks in advance...

drew_w · Accepted Answer · 2014-06-20 13:57:42Z

3

See the result: http://plnkr.co/edit/TgpNtGRjPICNgX2hi7NF?p=preview

Notes

One thing you can do really easily here is use the ng-disabled attribute. This can be added to the template and wired right up to your directive. That is basically what I did. The only thing to note about that is you need to also make sure you call the function rather than just using it as a property. In order to better indicate this is a function I renamed the property from disabled to isDisabled(). The following is the updated directive code.

Directive Change

app.directive("myButton", function()
{
  return {
    restrict: 'E',
    scope: {
      button: '='
    },
    replace: true,
    template: '<button class="btn btn-default" ng-disabled="button.isDisabled()">{{button.text}}</button>',
  };
});

answered Jun 20, 2014 at 13:57

drew_w

10.5k4 gold badges33 silver badges50 bronze badges

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

4 Comments

lucuma Over a year ago

Likewise, to use the ng-class it is a similar change: template: '<button class="btn btn-default" ng-class="{disabled: button.disabled()}">{{button.text}}</button>' plnkr.co/edit/m13UBVscAlBKhUFRkdzU?p=preview

HeinoVDS Over a year ago

Thanks for the answers... Just an additional question then, if I define a object in my array without the isDisabled function, won't that cause any problems?

lucuma Over a year ago

@HeinoVDS your ng-disabled can check for it if you want, something like: ng-disabled="button && button.isDisabled && button.isDisabled()

HeinoVDS Over a year ago

@lucuma I've tried something similar myself meanwhile and found out that it indeed works. Thanks for the additional info...

Collectives™ on Stack Overflow

Dynamically disable a directive with AngularJS

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related