我试图添加一个具有左侧面板和右侧面板的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>
问题:我做错了什么?有没有推荐的解决方法?
答案 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;实例