angularjs - 如何使用 transclude 将代码添加到我的指令中并在 AngularJS 中传递参数？

Question

我的应用程序中的许多地方都使用了如下代码
想用指令替换其中的一些 HTML。我意识到有
没有那么多我可以替换，因为 HTML 是如此不同:

<div class="select-area">
   <span>Subject</span>
   <select data-ng-disabled="option.subjects.length == 0"
           data-ng-model="option.selectedSubject"
           data-ng-options="item.id as item.name for item in option.subjects">
   </select>
</div>

<div class="select-area" data-ng-hide="utilityService.isNotNumber(option.selectedTopic)">
   <span>Subtopic</span>
   <select data-ng-model="option.selectedSubtopic"
           data-ng-options="item.id as item.name for item in option.subtopicsPlus">
   </select>
</div>

我想使用指令，但我不确定如何开始。我想用
transclude 来替换里面，所以我在想我的指令调用
看起来像这样:

<div class="select-area" my-select-area="Subject">
   <select data-ng-disabled="option.subjects.length == 0"
           data-ng-model="option.selectedSubject"
           data-ng-options="item.id as item.name for item in option.subjects">
   </select>
</div>

<div class="select-area" data-ng-hide="utilityService.isNotNumber(option.selectedTopic)" my-select-area="Subtopic">
   <select data-ng-model="option.selectedSubtopic"
           data-ng-options="item.id as item.name for item in option.subtopicsPlus">
   </select>
</div>

这是我到目前为止所拥有的:

app.directive('mySelect', function () {
    return {
        restrict: "A",
        template: "<div class='select-area'>" +
                  "<span> </span>" +

                  "</div>",
    };
});

有人可以告诉我如何传入跨度内的参数以及如何添加 transclude 吗？

更新 :基于巴斯蒂安的回答

有几个小的语法错误，但根据 Bastien 的回答，我尝试了以下操作:

app.directive('mySelect', function () {
    return {
        restrict: "A",
        transclude: true,
        template: "<div class='select-area'>" +
                    "<span> {{ mySelectArea }} </span>" +
                    "<div ng-transclude></div>" +
                  "</div>",
        link: function (scope, element, attrs) {
            scope.mySelectArea = attrs.mySelectArea;
        }
    }
});

这是我的 HTML:

<div data-my-select myselectarea="Page type">
   <select data-ng-model="option.selectedPageType"
           data-ng-options="item.id as item.type for item in option.pageTypes"></select>
</div>

这是它创建的 HTML:

<div data-my-select="" myselectarea="Page type">
<div class="select-area">
   <span class="ng-binding">  </span>
   <div ng-transclude="">
   <select data-ng-model="option.selectedPageType" 
           data-ng-options="item.id as item.type for item in option.pageTypes" 
           class="ng-scope ng-pristine ng-valid">
      <option value="0">Edit Basic</option>
      <option value="1" selected="selected">Edit Standard</option>
      <option value="2">Report</option>
   </select>
   </div>
</div>
</div>

我真正需要的是它来创建这个:

<div class="select-area">
   <span>Page Type</span>
   <select data-ng-model="option.selectedPageType" 
           data-ng-options="item.id as item.type for item in option.pageTypes" 
           class="ng-pristine ng-valid">
      <option value="0">Edit Basic</option>
      <option value="1" selected="selected">Edit Standard</option>
      <option value="2">Report</option>
   </select>
</div>

Answer 1

关于转置，建议你看一下this section of the doc .在您的情况下，您必须:

在指令定义对象中请求嵌入

使用 ng-transclude 指令

在模板中指示哪个元素将接收被嵌入的元素

这给了我们这个指令:

app.directive('mySelect', function () {
    return {
        restrict: "A",
        transclude: true,
        template: "<div class='select-area'>" +
                    "<span> </span>" +
                    "<div ng-transclude></div>" +
                  "</div>"
    };
});  

关于传递参数，您可以访问 link 的第三个参数上的指令属性。功能:

app.directive('mySelect', function () {
    return {
        restrict: "A",
        transclude: true,
        template: "<div class='select-area'>" +
                    "<span> </span>" +
                    "<div ng-transclude></div>" +
                  "</div>",
        link: function (scope, element, attrs) {

        }
    };
});  

那么，如果你的参数是 总是 纯文本，您可以直接访问该值:

attrs.mySelectArea      

否则，如果您的参数可以在范围内，您可以使用 $parse服务以获取其值(value):

$parse(attrs.mySelectArea)(scope)

要在模板中显示值，您必须在范围内提供它:

app.directive('mySelect', function () {
    return {
        restrict: "A",
        transclude: true,
        template: "<div class='select-area'>" +
                    "<span> {{ mySelectArea }} </span>" +
                    "<div ng-transclude></div>" +
                  "</div>",
        link: function (scope, element, attrs) {
            scope.mySelectArea = attrs.mySelectArea;
        }
    };

最后，如果您希望指令模板替换元素，您可以使用替换选项( more infos ):

app.directive('mySelect', function () {
    return {
        restrict: "A",
        transclude: true,
        replace: true,
        template: "<div class='select-area'>" +
                    "<span> {{ mySelectArea }} </span>" +
                    "<div ng-transclude></div>" +
                  "</div>",
        link: function (scope, element, attrs) {
            scope.mySelectArea = attrs.mySelectArea;
        }
    };

我做了一个 plunker其中。

我强烈建议您深入了解 directive guide和 directive API清楚地了解指令可以做什么。