我继承了这个代码集,我想我理解发生了什么,但我似乎无法在自定义的$ compile'd指令中使用ng-show。我怀疑它可能与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方法永远不会被调用。
我尝试了以下相应的结果:
只要我能够了解我是哪种恐龙,例如将$元素传递给父方法,或者甚至只是attr.dinosaurId,我就会满足#1。 我不能依赖它们附加到恐龙阵列的顺序,因为gridster会重新排列它们。
答案 0 :(得分:0)
我想出来了。问题的根源在于:
dino = $compile(dino)(scope);
在这里,我们正在创建恐龙指令,我们正在使用tarpit范围。我们后来做了
scope.isExtinct = function() { ... }
'范围'在恐龙指令范围内,但出于某种原因,在ng-show中无法访问isExtinct,我假设因为ng-show存在于Tarpit范围内但是isExtinct生活在恐龙范围内。这只是猜测。看来这意味着我们说的是tarpit.ngShow = tarpit.isExtinct。 tarpit.isExtinct不存在(但没有错误表明这样)所以它是未定义的并且ng-show =“undefined”是有效的,所以它不会对我们大喊大叫。这就是在$ parent上创建isExtinct解决问题的原因,因为现在tarpit.isExtinct确实存在。这也意味着严格隔离范围将允许正常继承为我们解决这个问题。
鉴于此,我找到了两个解决方案:
scope.$parent.isExtinct = function() { ... }
和
scope: true
由于我需要的任何数据都作为属性传入,因此我能够通过attrs而不是范围值来消耗我需要的所有内容。我刚刚使用
结束了 scope: true