Question

我正在尝试创建一个可以创建多个元素的指令，用多个替换调用元素。具体来说，我想在单个列表项上设置指令，并让它创建多个没有包装元素的列表项。（使用<UL>指令有效，但阻止我包含'静态'项。）以下是标记：

<ul>
    <li>static first</li>
    <li my-repeater="myVar"></li>
    <li>static last</li>
</ul>

在我的控制器中，我将定义myVar：

$scope.myVar = ['one', 'two', 'three'];

我的指示看起来像这样：

myApp.directive('myRepeater', function () {
    return {
        restrict: 'A',
        transclude: 'element',
        replace: true, //<--- DEPRECATED 
        scope: {
            val: '=myRepeater'
        },
        template: '<li ng-repeat="item in val">{{item}}</li>'
    };
};

在AngularJS v1.2.26中，除非你删除'替换'，否则你什么也得不到。这不可能吗？我确实注意到在docs对于v1.3.4他们觉得：

应用程序功能需要更换元素的情况非常少......

但我的上述案例似乎是一个明确的例子，除非有一个“更好的方法”，否则需要这个！...

Answer 1

如果您不将其作为属性执行，那么您可以使用元素执行此操作：

<div ng-app="myApp">
    <div ng-controller="MyCtrl">
        <ul>
            <li>static first</li>
            <my-repeater var="myVar"></my-repeater>
            <li>static last</li>
        </ul>
    </div>
</div>

指令

    .directive('myRepeater', function () {
    return {
        restrict: 'E',
        scope: {
            val: '=var'
        },
        template: '<li ng-repeat="item in val">{{item}}</li>'
    };
    })

我更新了小提琴以显示它http://jsfiddle.net/6rjr8nq5/1/

由于未知标签只是被忽略，因此效果很好。

如果您需要该属性，可以将其粘贴在ul上，转换，并使用link函数正确放置静态数据，假设您知道它在哪里。

AngularJS：使用Transclude替换元素：'element'但不是弃用的'replace'？

1 个答案: