AngularJS：在单个Angular指令中跨多个子元素

Question

我是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>before</div><div ng-transclude></div><div>after</div> 它将呈现之前的指令性内容。

这是全部。 我的问题是有可能以某种方式将更多的单个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” ......

感谢

Answer 1

启动角度1.5，它现在可以创建多个插槽。相反transclude的：真正，你提供一个对象与每个插槽的映射：

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

Answer 2

很酷的问题。我不确定是否有内置的方式，但您可以通过非常通用的方式自行完成。

您可以通过在$ transclude服务通过这样的访问transcluded元素：

$transclude(function(clone, $scope) { 

如果克隆将成为联预transcluded内容的副本。然后，如果你的标签这样的元素内容：

<div id="content"> 
     <div id="content0">{{text}}</div> 
     <div id="content1">{{title}}</div> 
    </div> 

你也可以遍历的内容和编译如下：

$scope.transcludes.push($compile(clone[1].children[i])($scope)); 

太好了！现在你只需要放置在正确的位置的内容在你的模板

 '<div id="transclude0"></div>' + 
    '<div id="transclude1"></div>' + 

然后你就可以在你的链接功能分配正确

angular.element(document.querySelector('#transclude' + i)).append(scope.transcludes[i]); 

我成立了一个fiddle你可以与播放内容有这个设置。

希望这有助于！

Answer 3

在我们的项目中，我们已经对JSF 2的UI之后的多站点trasclusion进行建模：组合，ui：insert，ui：define（请参阅ui:composition）。

实现包含三个简单指令：ui-template，ui-insert，ui-define（请参阅angularjs-api/template/ui-lib.js）。

定义模板一个写下面的标记（见angularjs-api/template/my-page.html）：

<table ui-template> 
    <tr> 
    <td ui-insert="menu"></td> 
    </tr> 
    <tr> 
    <td ui-insert="content"></td> 
    </tr> 
</table> 

，并宣布了一项指令（见angularjs-api/template/my-page.js）：

var myPage = 
    { 
    templateUrl: "my-page.html", 
    transclude: true 
    }; 

    angular.module("app"). 
    directive("myPage", function() { return myPage; }); 

最后，以实例化指令一个需求（见angularjs-api/template/sample.html）：

<my-page> 
    <div ui-define="content"> 
    My content 
    </div> 
    <div ui-define="menu"> 
    <a href="#file">File</a> 
    <a href="#edit">Edit</a> 
    <a href="#view">View</a> 
    </div> 
</my-page> 

工作样品可以通过rawgit可以看出：sample.html

参见：Multisite Transclusion in AngularJS