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