AngularJS中没有隔离范围的指令范围属性

Question

有没有办法继承父作用域,同时用传递的属性扩展它？

我想直接从模板将参数传递给可重用的指令,而不必在链接函数中更改DOM.

例如:

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

对于这样的指令:

    <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在父作用域中,在这种情况下控制整个表单,但我不认为有必要在控制器中存储样式属性.

有没有一种方法可以直接在模板中传递参数而无需创建隔离范围？

Answer 1

您将无法"扩展"父范围.但是,您的目标可以通过使用在指令的link函数中注入的指令标记属性来实现.

所以,例如.为了附加你的label变量,你的指令的链接函数如下所示:

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

您可以查看下面的plunker进行现场演示.
http://plnkr.co/edit/2qMgJSSlDyU6VwdUoYB7?p=preview

Answer 2

Angad的答案适用于静态链接,但如果链接后属性的值可能会更改,则不会更新.如果你需要这个,sollution将把值传递给字符串而不是引用:

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

在该指令中,在属性上添加$ observe以更新范围变量:

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

现在,如果属性值发生变化,范围变量将动态变化.