Javascript ng show方法未在自定义$compile'd指令内执行

我继承了这个代码集，我想我知道发生了什么，但我似乎无法在自定义的$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>

当恐龙web服务完成后，我们点击$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指令内部的控制器中。结果与1相同。方法被调用，但不知道是哪个恐龙调用了它。

---

在这一点上，只要我能保持我是哪只恐龙的想法，比如将$element传递给父方法，甚至只传递attr.digorid，我就接受1。我不能依赖它们被添加到恐龙阵列的顺序，因为gridster会重新排列它们。

我发现了这一点。问题的根源在于：

              dino = $compile(dino)(scope);

在这里，我们正在创建恐龙指令，我们正在使用tarpit范围进行创建。后来我们这样做了

              scope.isExtinct = function() { ... }

这里的“范围”在恐龙指令范围内，但出于某种原因，在ng show中无法访问isExtinct，我认为这是因为ng show位于柏油坑范围内，而isExtinct位于恐龙范围内。那只是猜测。这似乎意味着我们说的是tarpit.ngShow=tarpit.isExtinct。tarpit.isExtinct不存在，但没有错误指示某某未定义，并且ng show=undefined有效，因此它不会对我们大喊大叫。这就是为什么在$parent上创建isExtinct解决了问题，因为现在tarpit.isExtinct确实存在。这也意味着不那么严格地隔离作用域将允许正常继承为我们解决这个问题

鉴于此，我找到了两种解决方案：

             scope.$parent.isExtinct = function() { ... }

及

因为我需要的任何数据都是作为属性传入的，所以我可以通过attrs而不是scope值来使用我需要的所有数据。我最后只是用

             scope: true

---

1.您使用的是角度兼容的gridster吗？ie:AngularGridster 2。您没有使用模板字符串或模板url是否正确？是的，正在使用角度兼容的gridster。正确，我不能使用模板或templateUrl。HTML需要作为字符串使用。

             scope: true