Check existence of attribute in AngularJs Directive

Question

Is is possible to check whether a given attribute is present in a directive, ideally using isolate scope or in a worst case scenario the attributes object.

With a directive that looked something like this <project status></project>, I want to conditionally render a status icon, but only if the status attribute is present.

return {
  restrict: 'AE',
  scope: {
    status: '@'
  },
  link: function(scope, element, attrs) {
    scope.status === 'undefined'
  }
}

Ideally, it would be bound straight to the scope, so that it could be used in the template. However, the bound variable's value is undefined. The same goes for & read-only and = two-way bindings.

I know that it's trivially solved by adding a <project status='true'></project>, but for directives that I will use frequently, I'd rather not have to. (XHTML validity, is not an issue).

I know you mentioned it, but just wondering - did you try something like "status" in attrs and see what that evaluation is? — Ian
– Ian, Commented Sep 12, 2014 at 15:31
isn't "@" a one way text binding passed to the directive? so scope.status should be the text reading 'true', so long as you pass a variable into the directive as <code><project status="{{myScopeVariable}}"></project></code> — SoluableNonagon
– SoluableNonagon, Commented Sep 12, 2014 at 15:39
When you specify scope as an object like above, the directive creates a new isolate Scope which doesn't inherit properties from parent scope. Instead use scope: true to create a new scope (with access to parent scope properties), or scope: false to have directive use parent scope. Is that what you're asking? I don't quite get your question... — Sunil D.
– Sunil D., Commented Sep 12, 2014 at 15:44
Also the code in your link function is just a boolean expression. Did you mean to include that in an IF statement? — Sunil D.
– Sunil D., Commented Sep 12, 2014 at 15:45
scope.status === 'undefined' <== doesn't do anything all by itself. What are you expecting? — charlietfl
– charlietfl, Commented Sep 12, 2014 at 15:45

James Jackson · Accepted Answer · 2014-09-12 15:52:49Z

66

The way to do this is to check for the existence of the attributes within the link function's attrs parameter, and assign this to variables within your directive's isolate scope.

scope:{},
link: function(scope, element, attrs){
  scope.status = 'status' in attrs;
},

This should work without having to use an if statement within your link function.

answered Sep 12, 2014 at 15:52

James Jackson

7826 silver badges4 bronze badges

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

Comments

Joao Leal · Accepted Answer · 2014-09-12 15:48:03Z

19

The way to do what you want is by looking at the attribute object in the link function:

link: 
  function(scope, element, attrs) {
    if("status" in attrs)
       //do something
  }

answered Sep 12, 2014 at 15:48

Joao Leal

5,5521 gold badge15 silver badges23 bronze badges

Comments

Justin Boyson · Accepted Answer · 2016-08-09 15:20:48Z

4

To Check for attributes when using angular 1.5+ components you can use the $postLink lifecycle hook and the $element service like this:

constructor(private $element) {}

$postLink() {
  if(!this.$element.attr('attr-name')){
    // do something
  }
}

answered Aug 9, 2016 at 15:20

Justin Boyson

3163 silver badges17 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:26:34Z

1

Since the attrs value is type of javascript object. To check attribute existence we can also using hasOwnProperty() method instead in keyword.

So, it could be :

link: function(scope, element, attrs) {
  var is_key_exist = attrs.hasOwnProperty('status');//Will return true if exist
}

You can read further the difference between in keyword and hasOwnProperty() method at this link

edited May 23, 2017 at 12:26

CommunityBot

11 silver badge

answered Jun 14, 2016 at 8:34

Bayu

2,7141 gold badge30 silver badges34 bronze badges

Collectives™ on Stack Overflow

Check existence of attribute in AngularJs Directive

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related