AngularJS:在单个Angular指令中转录多个子元素

前端之家收集整理的这篇文章主要介绍了AngularJS:在单个Angular指令中转录多个子元素前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我是Angular的新手,但已经读了不少。
我正在阅读关于ng-transclude在 http://docs.angularjs.org/guide/directive#creating-custom-directives_demo_isolating-the-scope-of-a-directive,我想我理解正确它做什么。

如果你有一个指令适用于其中包含内容的元素,例如

<my-directive>directive content</my-directive>

它将允许您使用ng-transclude对指令模板中的元素进行标记,并且元素中包含的内容将在标记的元素内部呈现。

因此如果myDirective的模板在< / div>之后的< / div>< divng-transclude>之前< / div>< div&
它将呈现为前导内容之后。

这是所有o.k.
我的Q是有可能以某种方式传递更多,然后一个单一的HTML块到我的指令?

例如

假设指令的用法如下所示:

<my-multipart-directive>
     <part1>content1</part1>
     <part2>content2</part2>
</my-multipart-directive>

并有一个模板如:

<div>
  this: <div ng-transclude="part2"></div>
   was after that: <div ng-transclude="part1"></div>
   but now they are switched
<div>

呈现为

<div>
  this: <div ng-transclude="part2">content2</div>
   was after that: <div ng-transclude="part1">content1</div>
   but now they are switched
<div>

(思考自己)我可以不知何故将一个节点的HTML值绑定到模型,这样我就可以使用它,而不用调用它“transclude”…

谢谢

启动Angular 1.5,现在可以创建多个插槽。而不是transclude:true,您提供一个对象与每个插槽的映射:

https://docs.angularjs.org/api/ng/directive/ngTransclude

angular.module('multiSlotTranscludeExample',[])
 .directive('pane',function(){
    return {
      restrict: 'E',transclude: {
        'title': '?pane-title','body': 'pane-body','footer': '?pane-footer'
      },template: '<div style="border: 1px solid black;">' +
                  '<div class="title" ng-transclude="title">Fallback Title</div>' +
                  '<div ng-transclude="body"></div>' +
                  '<div class="footer" ng-transclude="footer">Fallback Footer</div>' +
                '</div>'
    };
})
原文链接:https://www.f2er.com/angularjs/145799.html

猜你在找的Angularjs相关文章