Angular optional attribute in directive

Question

I have a directive:

angular
  .module('test')
  .directive('multiButton', function () {
    return {
      restrict: 'E',
      replace: true,
      scope: {
        disabled: '@'
      },
      template: '<div class="multi-button"><button ng-disabled={{disabled}}></button></div>'
    });

The disabled scope attribute is optional, but I don't want to have "ng-disabled" stuff in my template when rendered if no disabled attribute was submitted.

Is this possible? And if so how?

disabled: '@?', the ? operator. stackoverflow.com/a/20447939/624590 — DRobinson
– DRobinson, Commented Jul 24, 2015 at 14:00
@DRobinson sure but still when the template is rendered, it will have "ng-disabled" in it right? This is what I want to prevent. — randomKek
– randomKek, Commented Jul 24, 2015 at 14:01
Ahhhh, makes sense. Then you probably want the @? combined with a compile function to build the template String. — DRobinson
– DRobinson, Commented Jul 24, 2015 at 14:02
@randomKek are you going to set the disabled value dynamically — Pankaj Parkar
– Pankaj Parkar, Commented Jul 24, 2015 at 14:11
Actually, compile was over-complicating things. Link makes more sense. Updated my answer to simplify it. — DRobinson
– DRobinson, Commented Jul 24, 2015 at 14:31

DRobinson · Accepted Answer · 2015-07-24 14:31:21Z

You can check if the attribute exists on link, and add the related (ngDisabled) attribute if so:

angular.module('myApp',[])
    .directive('multiButton', function () {
        return {
            restrict: 'E',
            replace: true,
            scope: {
                disabled: '@?'
            },
            template: '<div class="multi-button"><button></button></div>',
            link: function(scope, element, attr){
                if(attr.disabled){
                    element.find('button').attr('ng-disabled', attr.disabled);
                }
            }
        }
    });

Demo Fiddle: http://jsfiddle.net/guv11rxq/

Now, as expected, <multi-button disabled="hello"></multi-button> will result in:

<div class="multi-button"><button ng-disabled="hello"></button></div>

But without the optional attribute, <multi-button></multi-button>, it will result in:

<div class="multi-button"><button></button></div>

Ivan Stoyanov · Accepted Answer · 2015-07-24 14:10:04Z

1

You can do this by using ng-if in your template:

 template: '<div class="multi-button" ng-if="disabled != ''"><button ng-disabled={{disabled}}></button></div><div class="multi-button" ng-if="disabled === ''"><button></button></div>'

answered Jul 24, 2015 at 14:10

Ivan Stoyanov

5,48212 gold badges59 silver badges73 bronze badges

3 Comments

DRobinson Over a year ago

This adds a lot of extra template code to maintain (any changes have to be made in both places, which should often be avoided when writing code - aim for DRY). Also, and this is a a much smaller issue, it will add two comparisons to every $digest cycle for every one of these elements.

Ivan Stoyanov Over a year ago

@DRobinson You are correct. This is not the best way to do this, but you can use it nevertheless.

DRobinson Over a year ago

Yep, I agree that in principle this basically works, albeit very non-optimal. This is an approach that should be avoided for the reasons that I outlined in the comment above.

Collectives™ on Stack Overflow

Angular optional attribute in directive

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related