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?

Answer 1

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

Answer 2

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.