Attribute without value in AngularJS directive

Question

I've written a directive with an isolate scope.

app.directive('myDirective', function() {
    return {
        restrict: 'E',
        scope {
            attr1: '@',
            attr2: '@',
            noValueAttr: // what to put here?
        },
        link: function(scope, elem, attrs) {
            // how to check here if noValueAttr is present in mark-up?
        }
    };
});

the html could be

<my-directive attr1='...' attr='...' ... no-value-attr>

or

<my-directive attr1='...' attr='...' >

I am wondering how to use (and have the directive detect if it's there or not) an optional attribute which has no assigned value. Thanks.

GregL · Accepted Answer · 2014-12-04 05:52:38Z

22

Just use attrs.hasOwnProperty('noValueAttr') in the link function to test whether the attribute is present or not.

Don't forget the attribute in markup would be no-value-attr, not noValueAttr like you showed.

 link: function(scope, elem, attrs) {
           if (attrs.hasOwnProperty('noValueAttr'))
              // attribute is present
           else 
              // attribute is not present

    }

edited Dec 4, 2014 at 5:52

answered Dec 4, 2014 at 4:26

GregL

38.2k8 gold badges65 silver badges68 bronze badges

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

4 Comments

oikonomiyaki Over a year ago

Do I need to place noValueAttr in the isolate scope? If it is, what would I place after the colon in noValueAttr: ...?

geckob Over a year ago

@menorah84: Nope. You don't have to

GregL Over a year ago

@menorah84 You don't need to place all attributes in the isolate scope definition object. I tend to keep all constant string valued attributes and boolean/no-value attributes out of it, myself. Just use attrs instead.

Davut Gürbüz Over a year ago

when attribute is present scope.attribName=true else scope.attribName=false provide the variable I need in my template. Thanks

Fred Brasil · Accepted Answer · 2017-06-17 20:31:03Z

0

I know it is an old question, but there is that way to:

link: function(scope, elem, attrs) {
  scope.noValueAttr = scope.$eval(attrs.noValueAttr) || 'default value';
}

answered Jun 17, 2017 at 20:31

Fred Brasil

294 bronze badges

1 Comment

mix3d Over a year ago

I don't think this answers the question: How to map value-less attributes that are truthy if present and false if not present to a boolean $scope variable.

Collectives™ on Stack Overflow

Attribute without value in AngularJS directive

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related