AngularJS +指令:多个被剔除的元素

时间:2014-08-13 18:20:52

标签: angularjs angularjs-directive angularjs-ng-transclude

我试图添加一个具有左侧面板和右侧面板的body指令。但是在这些面板之间我会有一些私有的body指令内容。我目前正在使用 transclude = true 选项加载内容。但是,我正在寻找一种方法来使用两个ng-transclude。我调查了很多如何解决这个问题,但我找不到一个优雅的解决方案。我不得不在body指令的编译步骤中手动添加transcluded对象。以下是我解决这个问题的方法:

身体指令

var myApp = angular.module('myApp', []);

myApp.directive('body', function () {
    return {
        restrict: 'A',
        transclude: true,
        scope: {
            title: '@'
        },
        templateUrl: 'body.html',
        compile: function compile(element, attrs, transclude) {
            return function (scope) {
                transclude(scope.$parent, function (clone) {
                    for (var i = 0; i < clone.length; i++){ 
                       var el = $(clone[i]);
                       if(el.attr('panel-left') !== undefined) {
                            element.find('#firstPanel').html(el);
                       } else if(el.attr('panel-right') !== undefined) {
                            element.find('#secondPanel').html(el);
                       }
                    }
                });
            }
        }
    };
});

myApp.directive('panelLeft', function () {
    return {
        require: "^body",
        restrict: 'A',
        transclude: true,
        replace: true,
        template: '<div ng-transclude></div>'
    };
});

myApp.directive('panelRight', function () {
    return {
        require: "^body",
        restrict: 'A',
        transclude: true,
        replace: true,
        template: '<div ng-transclude></div>'
    };
});

模板

<script type="text/ng-template" id="body.html">
    <h1> {{title}} </h1>
    <hr/>

    <div id="firstPanel" class="inner-panel"></div>
    <div id="innerMiddleContent" class="inner-panel">middle private content here</div>
    <div id="secondPanel" class="inner-panel"></div>
</script>

<div body title="Sample Body Directive">
    <div panel-left>
        Public content that goes on the left
    </div>   

    <div panel-right>
        Public content that goes on the right
    </div>    
</div>

Here是此示例的JSFiddle。我正在寻找这样的事情:

有用的模板

 <script type="text/ng-template" id="body.html">
     <h1> {{title}} </h1>
     <hr/>

     <div id="firstPanel" class="inner-panel" ng-transclude="panel-left"></div>
     <div id="innerMiddleContent" class="inner-panel">middle private content here</div>
     <div id="secondPanel" class="inner-panel" ng-transclude="panel-right"></div>
 </script>

问题:我做错了什么?有没有推荐的解决方法?

2 个答案:

答案 0 :(得分:3)

你看过这个指令吗?

https://github.com/zachsnow/ng-multi-transclude

我认为这正是您所寻找的。

所以稍微修改一下你的模板

<div ng-multi-transclude="panel-left" class="inner-panel"></div>
<div ng-multi-transclude="panel-right" class="inner-panel">middle private content here</div>
<div id="secondPanel" class="inner-panel"></div>

然后你可以像这样使用它

<div body title="Sample Body Directive">
  <div name="panel-left">
    Public content that goes on the left
  </div>   

  <div name="panel-right">
    Public content that goes on the right
  </div>    
</div>

答案 1 :(得分:1)

从Angular 1.5开始,支持多个没有第三方库的转换。

这称为“插槽”转换,您可以通过向指令的transclude属性提供对象来指定插槽。

directive('someDirective', {
  template: '<div ng-transclude="first"></div><div ng-transclude="second"></div>'
  transclude: {
    first: '?elementOne', // Question mark makes it optional
    second: 'elementTwo'
  },
...
}

然后当你使用someDirective时:

<some-directive>
  <element-one><!-- content to tranclude into first slot --></element-one>
  <element-two><!-- content to tranclude into second slot --></element-two>
</some-directive>

附加阅读&amp;实例

Documentation for ngTransclude

Using Angular 1.5's Multiple Transclusion Slots