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

Question

我对Angular很新,但已经阅读了很多.我正在读关于ng-transclude在http://docs.angularjs.org/guide/directive#creating-custom-directives_demo_isolating-the-scope-of-a-directive,我想我理解正确它做什么.

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

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

它将允许您在指令的模板中标记元素,ng-transclude并且元素中包含的内容将在标记元素内呈现.

因此,如果模板myDirective是<div>before</div><div ng-transclude></div><div>after</div> ,它将呈现为之前的指导内容.

这一切都很好我的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"......

谢谢

Answer 1

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

Answer 2

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

您可以通过传递$ transclude服务来访问transcluded元素,如下所示:

$transclude(function(clone, $scope) {

克隆将是预链接的被转换内容的副本.然后,如果您在元素中标记内容,如下所示:

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

我设置了一个你可以玩的小提琴.

希望这有帮助!