Question

我正在尝试执行以下操作：

我有一个名为<overlay></overlay>的重复用户界面模式此叠加层由templateUrl中的指令 dir1 动态创建。

我们现在假设我有第二个名为<gallery></gallery>的UI元素，它也是由指令 dir2 动态创建的。

是否可以将图库模板传递到叠加层中，创建如下内容：

 <overlay>
      <gallery></gallery>
 </overlay>

请注意，元素叠加层和图库将替换为其各自指令中的模板。

这是一个小插件，更新了问题==＆gt; http://plnkr.co/edit/Bu2cwXYVQXKmjDVXaHuK?p=preview

Answer 1

是的，您可以使用ng-transclude。类似的东西：

angular.module("myModule", []).
    directive("overlay", function () {
        return {
            restrict: "E",
            transclude: true,
            // or  templateUrl: ...
            template: '<ul class="u" ng-transclude></ul>',
            replace: true
        };
    }).
    directive("gallery", function () {
        return {
            require: "^overlay",
            restrict: "E",
            scope:{cls:'@'},
            transclude: true,
            // or  templateUrl: ...
            template: '<li class="l"><button class="{{cls}}" ng-transclude></button></li>',
            replace: true
        };
    });

无论如何，这是满足您需求的好例子：

演示 Fiddle

Answer 2

您正在撰写transclude：true但您没有在任何地方使用transclusion

所以代替你的代码，你应该写如下

模板："<div class='my-generic-overlay' ng-transclude>This should be replaced by the myGallery template</div>"

最佳实践：在AngularJS中的另一个模板中包装模板？

2 个答案: