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屋!