Javascript AngularJS:使用Transclude:'替换元素;元素';但不是不推荐的';替换';?

Javascript AngularJS:使用Transclude:'替换元素;元素';但不是不推荐的';替换';?,javascript,angularjs,Javascript,Angularjs,我试图创建一个可以创建多个元素的指令,并用多个元素替换调用元素。具体来说,我希望在单个列表项上设置该指令,并让它创建多个列表项,而不使用包装元素。(对指令使用,但不允许我包含“静态”项。)以下是标记: <ul> <li>static first</li> <li my-repeater="myVar"></li> <li>static last</li> </ul> 我的指令

我试图创建一个可以创建多个元素的指令,并用多个元素替换调用元素。具体来说,我希望在单个列表项上设置该指令,并让它创建多个列表项,而不使用包装元素。(对指令使用
,但不允许我包含“静态”项。)以下是标记:

<ul>
    <li>static first</li>
    <li my-repeater="myVar"></li>
    <li>static last</li>
</ul>
我的指令是这样的:

myApp.directive('myRepeater', function () {
    return {
        restrict: 'A',
        transclude: 'element',
        replace: true, //<--- DEPRECATED 
        scope: {
            val: '=myRepeater'
        },
        template: '<li ng-repeat="item in val">{{item}}</li>'
    };
};
myApp.directive('myRepeater',function(){
返回{
限制:“A”,
转移:'元素',
replace:true,//如果不必将其作为属性,则可以使用元素:

<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>'
    };
    })
指令('myRepeater',函数(){ 返回{ 限制:'E', 范围:{ val:'=var' }, 模板:“
  • {{item}
  • ” }; })
    我更新了小提琴以显示它

    由于未知标记被忽略,所以它可以正常工作


    如果您需要该属性,您可以将其粘贴在
    ul
    、transclude上,并使用
    link
    功能正确放置静态数据,前提是您知道静态数据的去向。

    我已经发布了上面的一些示例,这些示例阻止您在模板中正确使用
    ng repeat
    ?它已被弃用,未被删除。使用它,等待Angular 2.0发布,然后看看他们的建议migration@AlexG,我喜欢这种实用主义,并愿意接受它,但在这种情况下,我们的开发团队决定避免使用不推荐的项目。@hon2a简单地使用ng repeat是我的第一选择(接吻规则!)但在我们的实际案例中,我们对实际选择有一定的逻辑性,所以我的目标是将其封装在一个指令中。我不知道为什么有人在没有至少评论他们的问题的情况下否决了答案……我也没有,我运行了这个解决方案,效果很好,唯一需要注意的是它会导致无关的markup一些纯粹主义者可能不喜欢(可能是验证问题),但这对我来说没什么大不了的。没错,这是无关的标记,但它是有效的。如果有人不喜欢无关的标记,那么“元素”的整个角度指令无效。我将接受此选项。选择此答案,因为它是我找到的最直接相关的解决方案。它在我们的实际案例中也运行良好,谢谢。我想写“HTH”,但它太短,无法发表评论,所以…很乐意帮上忙。
        .directive('myRepeater', function () {
        return {
            restrict: 'E',
            scope: {
                val: '=var'
            },
            template: '<li ng-repeat="item in val">{{item}}</li>'
        };
        })