角指令不评估内部NG-重复 [英] Angular Directive Does Not Evaluate Inside ng-repeat

问题描述

我有以下设置：

应用程序/指令

var app = angular.module("MyApp", []);

app.directive("adminRosterItem", function () {
    return {
        restrict: "E",
        scope: {
            displayText: "@"
        },
        template: "<td>{{ displayText }}</td>", // should I have this?
        link: function(scope, element, attrs){
            // What do I put here? I don't seem to have any
            // element to initialize (set up event handlers, for example)
        },
        compile: function(?,?,?){} // should I have this? If so, what goes inside?
    }
});

控制器

function PositionsController($scope) {
           $scope.positions = [{ Name: "Quarterback", Code: "QB" },
                               { Name: "Wide Receiver", Code: "WR" }
                              ]; 
}

HTML

<div ng-app="MyApp">
    <div ng-controller="PositionsController">            
        <table>
            <tr ng-repeat="position in positions">
                <admin-roster-item displayText="{{ position.Name + ' (' + position.Code + ')' }}"></admin-roster-item>
             </tr>
         </table>       
    </div>
</div>

这是一个非常简单的例子，但我不能让它呈现。也许有一些教程都没有告诉我，或者说是秘密的角度认识？

It's a very simple example, but I can't get it to render. Perhaps there's something that tutorials aren't telling me, or that is secret Angular knowledge?

如果我删除里面的＆LT指令; TR NG重复=.../＆GT; 和地点＆LT; TD＆GT; {{displayText}}＆LT; / TD＆GT; 相反，它会显示所有的记录。

If I remove the directive inside the <tr ng-repeat="..." /> and place <td>{{ displayText }}</td> instead, it will show all records.

但我想该指令不仅仅是一个单一的＆LT更加复杂; TD＆GT; {{}}＆LT; / TD＆GT; （最终），这样我可以重用这个指令在多个应用程序。

But I want the directive to be more complicated than just a single <td>{{}}</td> (eventually) so that I could reuse this directive in multiple apps.

所以，我真的问我们如何正确地创建一个指令，云内NG-重复？我在想什么？我应该从code拿掉上面？

So, I'm really asking how do we properly create a directive that goes inside ng-repeat? What am I missing? What should be taken off from the code above?

推荐答案

同意，你需要考虑在该指令的开始和结束。下面是说明绑定到阵列中的每一项指令中plnkr - <一个href=\"http://plnkr.co/edit/IU8fANreYP7NYrs4swTW?p=$p$pview\">http://plnkr.co/edit/IU8fANreYP7NYrs4swTW?p=$p$pview

Agree that you need to think about where the directive begins and ends. Here's a plnkr that illustrates a directive bound to each item in the array - http://plnkr.co/edit/IU8fANreYP7NYrs4swTW?p=preview

如果您希望该指令封装由它得到了一点小技巧父范围内定义的集合的枚举。我不知道，如果下面是最佳实践，但它是我是如何处理它 - <一个href=\"http://plnkr.co/edit/IU8fANreYP7NYrs4swTW?p=$p$pview\">http://plnkr.co/edit/IU8fANreYP7NYrs4swTW?p=$p$pview

If you want the directive to encapsulate the enumerating of a collection defined by a parent scope it gets a bit tricker. I'm not sure if the following is 'best practice', but it's how i've handled it -- http://plnkr.co/edit/IU8fANreYP7NYrs4swTW?p=preview

在对指令靠执行在涉足与transclusion迭代，这是一个由词，意思是（据我所知）取父定义的内容，将其推入指令，然后评估它。我一直在角工作了几个月，和我开始认为要求指令迭代是一种气味，我一直能够围绕它设计的。

When relying on the directive to perform the iteration you get involved with transclusion, which is a made up word that means (as i understand it) take the content defined in the parent, push it into the directive and then evaluate it. I've been working with angular for a few months, and I'm starting to think that asking the directive to iterate is a smell, and I've always been able to design around it.

这篇关于角指令不评估内部NG-重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！