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

您将无法像这样“扩展”父范围。但是，您的目标可以通过利用指令的链接功能中注入的指令标签属性来实现。

例如。为了附加您的 label 变量，您的指令的链接函数如下所示：

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

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

Answer 2

answer from Angad 将适用于静态链接，但如果属性的值在链接后可以更改，则不会更新。如果您需要这个，解决方案是将值作为字符串而不是引用传递：

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

在指令中，在属性上添加 $observe 以更新作用域变量：

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

现在作用域变量会随着属性值的变化而动态变化。