我继承了这个代码集,我想我明白发生了什么,但我似乎无法让 ng-show 在自定义的 $compile'd 指令中工作。我怀疑它可能与gridster有关,但我已经尝试过你会看到注释掉的行,效果相同。
这是一个非常简化的版本,因为我无法公开我正在处理的代码。我并没有真正制作恐龙应用程序,尽管那可能很好。
我不能为此使用 templateUrl,因为我们需要将每个结果添加到 gridster。还有很多事情要做。只要相信我不能:(
app.directive("tarpit", ["$compile", "gridster", function($compile, gridster) {
return {
scope: {
dinosaurs: "="
},
restrict: "A",
link: function(scope, element, attrs) {
var i, dino;
scope.$watch("dinosaurs", function(dinosaurs, oldDinosaurs) {
for(i = 0; i < dinosaurs.length; i++) {
// scope.dinosaurs is set from a provider higher up our scope chain. each dinosaur contains HTML
dino = angular.element(dinosaurs[i].html);
dino.attr("dinosaur-id", dinosaurs[i].id);
// i suspect these are the problem areas
dino = $compile(dino)(scope);
gridster.add(dino, dinosaurs[i].x, dinosaurs[i].y, dinosaurs[i].col, dinosaurs[i].row);
// i've also tried the following which didnt work
// element.append(dino);
}
}
}
};
}]);
app.directive("dinosaur", function() {
return {
scope: {
dinosaurs: "="
},
restrict: "A",
link: function(scope, element, attrs) {
scope.isExtinct = function() {
// there's more to it than this but you get the idea
for(var i = 0; i < scope.dinosaurs.length; i++) {
if(scope.dinosaurs[i].id == attrs.dinosaurId) {
return true;
}
}
return false;
};
}
};
});
页面开头如下:
<div tarpit dinosaurs="dinosaurs"></div>
当恐龙网络服务完成并且我们点击 $watch 时,页面最终将变为:
<div tarpit dinosaurs="dinosaurs">
<div dinosaur dinosaurs="dinosaurs" dinosaur-id="111">
<div ng-show="isExtinct()">I'm dead</div>
<div ng-show="!isExtinct()">It's a miracle</div>
</div>
...
<div dinosaur dinosaurs="dinosaurs" dinosaur-id="999">
<div ng-show="isExtinct()">I'm dead</div>
<div ng-show="!isExtinct()">It's a miracle</div>
</div>
</div>
问题是 isExtinct 方法永远不会被调用。
我尝试了以下方法,得到了相应的结果:
- 将 isExtinct 移至 'tarpit' - 它被执行,但我失去了我是哪种恐龙的上下文。我尝试将 $element 传递给它,但它仍然未定义。
- ng-show="$parent.isExtinct()" - 它不会被调用。
- 使用标志而不是方法。结果与上述相同。
- 将 isExtinct 放在 tarpit 指令内的 controller() 中。结果与#1 相同。该方法被调用,但不知道是哪个恐龙调用了它。
在这一点上,我会满足于#1,只要我能保持对我是哪种恐龙的想法,例如将 $element 传递给父方法,甚至只是 attr.dinosaurId。 我不能依赖将它们附加到恐龙数组的映射顺序,因为 gridster 会重新排列它们。