AngularJS: Obtain value of attribute defining directive in isolated scope

Question

So I have a a custom directive, named e.g custom as below:

app.directive('custom', function()
{
    return {

        restrict: 'A', 
        scope: { itemSelector: '=custom', gutter: '=' }, 
        link: function(scope, element, attrs){
            console.log("IS: " + scope.itemSelector);
            console.log("GUTTER: " + scope.gutter);
        }
    }
}

invoked via HTML like the below

<div custom="item" gutter="10"><!--content--></div>

Can anyone suggest why scope.gutter === '10' yet scope.itemSelector === undefined?

Is it possible to obtain the value of the directives defining attribute this way?

Thanks

Could you create a fiddle? Is item an object defined on the scope? — AlwaysALearner
– AlwaysALearner, Commented May 14, 2014 at 11:31
"item" is a just string literal. I'd expect scope.itemSelector === "item". Fiddle to come — Drew R
– Drew R, Commented May 14, 2014 at 11:40
To read string literals, you should use @. scope:{itemSelector:'@custom'} — AlwaysALearner
– AlwaysALearner, Commented May 14, 2014 at 11:41

Community · Accepted Answer · 2017-05-23 12:21:25Z

1

I guess item is not defined in the parent scope of your directive. You have two solutions explained in the following post (AngularJS Directive Passing String)

Either you wanted item to be passed as a string and add single quotes around it (by default it's evaluated as an angular expression)

<div custom="'item'" gutter="10"></div>
Or change your directive configuration so that it considers the custom attribute as a string : scope:

{ itemSelector: '@custom', gutter: '=' }

Hope this helps

edited May 23, 2017 at 12:21

CommunityBot

11 silver badge

answered May 14, 2014 at 11:39

webaba

6515 silver badges17 bronze badges

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

1 Comment

Drew R Over a year ago

Many thanks, great answer. I failed to realise it was being evaluated as an angular expression. Using the '@' configuration, or single quotes work great. Obviously the gutter="10" was working as angular could evaluate the 10 as a literal integer.

Collectives™ on Stack Overflow

AngularJS: Obtain value of attribute defining directive in isolated scope

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related