如何使用transclude将代码添加到我的指令中并传入AngularJS中的

发布时间：2020-12-17 08:33:56 所属栏目：安全来源：网络整理

导读：我有以下代码,在我的应用程序和许多地方使用想用指令替换一些 HTML.我意识到有并非如此,我可以替换,因为HTML是如此不同： div class="select-area" spanSubject/span select data-ng-disabled="option.subjects.length == 0" data-ng-model="option.select

我有以下代码,在我的应用程序和许多地方使用
想用指令替换一些 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>

我想使用指令,但我不确定如何开始.我想用
转换为替换内部所以我在想我的指令调用
看起来像这样：

<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的回答

有几个小的语法错误,但根据Bastien的答案我尝试了以下内容：

app.directive('mySelect',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>

关于翻译,我建议你看看 this section of the doc.在你的情况下,你必须：

>请求在指令定义对象中进行转换
>在模板中指明哪个元素将使用ng-transclude指令接收已转换的元素

这给了我们这个指示：

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

关于传递参数,您可以访问link函数的第三个参数上的指令属性：

app.directive('mySelect',template: "<div class='select-area'>" +
                    "<span> </span>" +
                    "<div ng-transclude></div>" +
                  "</div>",attrs) {

        }
    };
});

然后,如果您的参数始终是纯文本,则可以直接访问该值：

attrs.mySelectArea

否则,如果您的参数可以在范围内,则可以使用$parse服务获取其值：

$parse(attrs.mySelectArea)(scope)

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

app.directive('mySelect',attrs) {
            scope.mySelectArea = attrs.mySelectArea;
        }
    };

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

app.directive('mySelect',replace: true,attrs) {
            scope.mySelectArea = attrs.mySelectArea;
        }
    };

我做了一个plunker.

我强烈建议您深入了解directive guide和directive API,以便更好地了解指令可以做些什么.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!