0

私はこのコードセットを継承し、何が起こっているのか理解していると思いますが、カスタムの $compile ディレクティブ内で ng-show を動作させることができないようです。グリッドスターと関係があるのではないかと思いますが、同じ効果を得るためにコメントアウトされている行を試しました。

私が取り組んでいるコードを公開することはできないので、これは非常に単純化されたバージョンです。私は実際に恐竜アプリを作っているわけではありませんが、それはいいかもしれません。

各結果をグリッドスターに追加する必要があるため、これには templateUrl を使用できません。さらに多くのことが起こっています。私ができないことをただ信じてください:(

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 メソッドが呼び出されないことです。

次のことを試してみましたが、対応する結果が得られました。

  1. isExtinct を 'tarpit' に移動 - 実行されますが、自分がどの恐竜であるかというコンテキストが失われます。$element を渡そうとしましたが、未定義のままです。
  2. ng-show="$parent.isExtinct()" - 呼び出されません。
  3. メソッドの代わりにフラグを使用します。上記と同じ結果です。
  4. tarpit ディレクティブ内の controller() に isExtinct を配置します。#1と同じ結果。メソッドが呼び出されますが、どの恐竜がそれを呼び出したかはわかりません。

$element を親メソッドに渡すか、attr.dinosaurId だけを渡すなど、自分がどの恐竜であるかを把握できる限り、この時点で #1 に落ち着きます。 グリッドスターがそれらを再配置するため、それらが恐竜の配列にマッピングされている順序に依存することはできません。

4

1 に答える 1

0

私はこれを理解しました。問題の原因は次の行にありました。

              dino = $compile(dino)(scope);

ここでは、tarpit スコープを使用して恐竜ディレクティブを作成しています。後でしたとき

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

ここでの「スコープ」は恐竜ディレクティブ内にありましたが、何らかの理由で、ng-show 内で isExtinct にアクセスできませんでした。これは、ng-show が Tarpit スコープに存在し、isExtinct が Dinosaur スコープに存在したためだと思います。それはただの推測です。tarpit.ngShow = tarpit.isExtinct と言っていたようです。tarpit.isExtinct は存在​​しません (ただし、そのようなことを示すエラーはありません)。したがって、未定義であり、 ng-show="undefined" が有効であるため、怒鳴ることはありません。tarpit.isExtinct が存在するようになったため、これが $parent に isExtinct を作成することで問題が解決した理由です。また、スコープの分離をそれほど厳密にしないと、通常の継承でこれを把握できるようになることも意味します。

それを考えると、私は2つの解決策を見つけました：

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

と

             scope: true

必要なデータはすべて属性として渡されるため、スコープ値の代わりに attrs を介して必要なものすべてを使用することができました。使っただけで終わった

             scope: true
于 2014-08-25T18:11:51.780 に答える