0

我看到了在指令中使用嵌套模板的不同方式，但它们都不是很好用。至少我没有设法解决各种问题。

所以一个想法是——我需要创建一个可重用的指令，它由不同的逻辑部分（如页眉、页脚、菜单、操作栏、内容、选择器等）组成。我需要的是能够在 HTML 布局内指定整个模板和不同部分的模板，如下所示：

<videoBoard>
    <header-template>{{heading}}</header-template>
    <menu-template><a ng-click="showVideo()"/></menu-template>
    <content>
         <a ng-href="{{item.link}}" ng-repeat="items">{{item.caption}}</a>
    </content>
<videoBoard>

基于此定义，将创建目标 HTML 布局，就好像我直接在指令中指定它一样。同样，我需要能够使用范围变量传递的 HTML 元素通过代码指定。

类似的东西。如果我们在此处未指定某些模板，我们将使用默认模板（单独定义或在整个模板的标记部分内定义）。范围，跟踪更改之类的所有东西都应该起作用。

那么如何做到最好呢？

4

1 回答 1

0

我认为您的问题对于单个 SO 问题来说太宽泛了。如果您想询问有关动态模板的单独问题，这是替换项目的一种方法... （小提琴）

<script type="text/ng-template" id="test.html">
    <h1>Template H1 for {{name}}</h1>
    This should replace everything, but the &lt;h1&gt;
    element can be overridden
</script>    

<div class="boxed">
    <parent>
        <h1>Hello, {{name}}</h1>
        This should say only the person's name
    </parent>
</div>

<div class="boxed">
    <parent>
        This should say whatever the default is
    </parent>
</div>

可模板化的模板

使用transcludeandcompile代替link我们可以使用模板并且仍然可以访问原始元素。该compile函数返回一个函数，类似于link指令返回的普通函数。它linker作为一个参数，您可以调用该函数并提供另一个可以访问原始元素的函数（clone此处）。

    transclude: true,
    templateUrl: 'test.html',
    compile: function(element, attrs, linker) {
        // need to return linking function
        var parent = element.parent();
        return function($scope, $element, $attrs) {
            linker($scope, function(clone) {
                // 'clone' is a copy of the original elements in our 'parent' element
                var existing = $element.find('h1'); // in template
                if (existing.length == 1) {
                    // look for replacement h1 element specified in code
                    for (var i = 0; i < clone.length; i++) {
                        if (clone[i].tagName == "H1") {
                            // replace h1 element in template with specified
                            $element[0].replaceChild(clone[i], existing[0]);
                            break;
                        }
                    }
                }
            });
        }

这使用模板并完全替换标签之间的任何内容，但可以使用参数parent访问原始内容。clone在这里，h1如果原始元素中存在该元素，我将使用它来替换h1模板中的元素。语法有点滑稽，我希望我可以做一个clone.find('h1')但克隆似乎是我认为并发现不起作用的 JQLite 对象数组。

于 2013-10-10T19:40:12.083 回答