Directive scope attributes without an isolated scope in AngularJS

Question

Is there a way of inheriting the parent scope while extending it with passed attributes?

I want to pass parameters to a reusable directive directly from the template without having to alter the DOM in the linking function.

For example:

<form-input icon="icon-email" label="email" ng-model="data.input"></form-input>

For a directive like this:

    <div class="form-group">
      <label>{{label}}</label>
      <div class="input-group">
        <div class="{{icon}}">@</div>
        <input class="form-control" placeholder="Email" ng-model="mail.email">
      </div>
    </div>

ng-model is in the parent scope, controlling an entire form in this case, but I don't think it's necessary to store styling attributes in the controller.

Is there a way of passing parameters directly in the template without creating an isolate scope?

Angad · Accepted Answer · 2014-07-09 19:31:02Z

29

You would not be able to 'extend' the parent scope as such. However your objective can be accomplished by utilizing the directive tag attributes that are injected in the link function of your directive.

So eg. for attaching your label variable, your directive's link function would look like below:

 link: function ($scope, $element, $attributes) {
         $scope.label = $scope.$eval($attributes.label);
        }

You can check out the below plunker for a live demo.
http://plnkr.co/edit/2qMgJSSlDyU6VwdUoYB7?p=preview

edited Jul 9, 2014 at 19:31

answered Jul 9, 2014 at 19:24

Angad

3,4293 gold badges33 silver badges40 bronze badges

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

3 Comments

BarakChamo Over a year ago

I guess there's no way around the link then. Your plunk is just what I needed.

ethanfar Over a year ago

I removed the "$scope.$eval" part, and used the value directly supplied in "$attributes", since I'm expecting string, and don't want the users of the directive to have to wrap everything with quotes. Is that a bad practice? Thanks for the solution by the way !

The DIMM Reaper Over a year ago

@eitanfar To pass in a literal, you're right - you don't need to call `$scope.$eval', since there's nothing to interpolate. stackoverflow.com/a/15671573/3123195 has a good high-level explanation as well as links to the docs.

Community · Accepted Answer · 2017-05-23 12:17:01Z

8

The answer from Angad will work for static linking, but if the value of the attribute can change after linking, this will not be updated. If you need this, the sollution would be to pass the value as string instead of reference:

<form-input icon="icon-email" label="{{email}}" ng-model="data.input"></form-input>

In the directive, add an $observe on the attribute to update the scope variable:

$attributes.$observe('label', function(newValue){$scope.label=newValue});

Now the scope variable will dynamically change if the attribute value change.

edited May 23, 2017 at 12:17

CommunityBot

11 silver badge

answered Nov 9, 2015 at 13:25

awe

22.5k7 gold badges82 silver badges93 bronze badges

1 Comment

beNerd Over a year ago

can you do a two way data binding this way? without isolated scope?

Collectives™ on Stack Overflow

Directive scope attributes without an isolated scope in AngularJS

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related