AngularJS：没有一个孤立的范围指令作用域属性 [英] AngularJS : Directive scope attributes without an isolated scope

问题描述

据我了解，在指令指定范围的参数创建一个分离的范围。

As far as I understand, specifying scope parameters in a directive creates an isolate scope.

有没有继承父范围的一种方式，而延长它通过属性？

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

我想参数直接从模板传递到一个可重用的指令，而无需
以改变在DOM中的链接功能。

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

例如：

<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 is on the parent scope, controlling an entire form in this case, but I don't 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?

推荐答案

您将无法以扩展父范围如此。但是你的目标可以通过利用在你的指令的链接功能注入的指示标记属性来完成。

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);
        }

结果您可以检查出以下plunker了现场演示。结果
<一href=\"http://plnkr.co/edit/2qMgJSSlDyU6VwdUoYB7?p=$p$pview\">http://plnkr.co/edit/2qMgJSSlDyU6VwdUoYB7?p=$p$pview

这篇关于AngularJS：没有一个孤立的范围指令作用域属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！