Angular 指令不会在 ng-repeat 内部进行评估 [英] Angular Directive Does Not Evaluate Inside ng-repeat

问题描述

我有以下设置:

应用/指令

var app = angular.module("MyApp", []);app.directive("adminRosterItem", function () {返回 {限制:E"，范围: {显示文本:@"},模板:<td>{{ displayText }}</td>",//我应该有这个吗?链接:功能(范围，元素，属性){//我在这里放什么?我好像没有//要初始化的元素(例如，设置事件处理程序)},compile: function(?,?,?){}//我应该有这个吗?如果是这样，里面是什么?}});

控制器

function PositionsController($scope) {$scope.positions = [{ Name: "Quarterback", Code: "QB" },{名称:广角接收器"，代码:WR"}];}

HTML:

<div ng-controller="PositionsController"><表格><tr ng-repeat="位置位置"><admin-roster-item displayText="{{ position.Name + ' (' + position.Code + ')' }}"></admin-roster-item></tr>

这是一个非常简单的例子，但我无法渲染它.也许有一些教程没有告诉我的东西，或者是秘密的 Angular 知识?

如果我删除 <tr ng-repeat="..."/> 中的指令并放置 <td>{{ displayText }}</td> 相反，它将显示所有记录.

但我希望指令比单个 <td>{{}}</td>(最终)更复杂，以便我可以在多个应用程序中重用该指令.

所以，我真的在问我们如何正确创建一个进入 ng-repeat 的指令?我错过了什么?应该从上面的代码中去掉什么?

解决方案

同意您需要考虑指令的开始和结束位置.这是一个 plnkr，它说明了绑定到数组中每个项目的指令 - http://plnkr.co/编辑/IU8fANreYP7NYrs4swTW?p=preview

如果您希望指令封装由父作用域定义的集合的枚举，它会变得有点棘手.我不确定以下是否是最佳实践"，但我是这样处理的——http://plnkr.co/edit/IU8fANreYP7NYrs4swTW?p=preview

当依赖指令执行迭代时，您会涉及嵌入，这是一个合成词，这意味着(据我所知)获取父级中定义的内容，将其推送到指令中，然后对其进行评估.我已经使用 angular 几个月了，我开始认为要求指令迭代是一种味道，我一直能够围绕它进行设计.

I have the following setup:

App/Directive

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?
    }
});

Controller

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?

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

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.

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?

解决方案

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

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

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.

这篇关于Angular 指令不会在 ng-repeat 内部进行评估的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！