3

まず、次の質問がばかげているように聞こえる場合は、本当に申し訳ありません。ドキュメントがあることは知っていますが、十分な例がなく、まったく新しいものです。

を利用する可能性のあるディレクティブを作成しようとしましたがng-repeat
、ディレクティブがリンクされている場合、ng-repeatまったく評価されていないようです。そのため、関数内で jQuery 関数を呼び出そうとすると、jQuery は機能しpostlinkませんでした。

<div my-directive>
  <div ng-repeat="image in images">
    <img ng-src="image">
  </div>
</div>

スコープには次のようなものが含まれます。

scope.images = ['http://placehold.it/100x100', 'http://placehold.it/100x100'];

ディレクティブでは、おおよそ次のようにしました。

angular.module('mymodule', []).directive('myDirective', function factory() {
  return {
    restrict: 'A',
    compile: function (tElement, tAttrs, transclude) {
      // #1
      return {
        pre: function preLink(scope, iElement, iAttrs, transclude) {
          // #2
        },
        post: function postLink (scope, iElement, iAttrs, controller) {
          // #3
        }
      };
    },
    link: function postLink(scope, iElement, iAttrs) {
      // jQuery code to convert the element
      // #4
    }
  };
});

また、コードを上記の #1、#2、#3、#4 に置くことの違いは何ですか? ここでの経験則は何ですか？
おそらくjQueryUIのようなコードをどこに置くの$( "#datepicker" ).datepicker();ですか? 私が理解していることから、関数は要素とその子を操作 (変換) します。
ありがとう。

4

1 に答える 1

4

場所間の主な違い (ここで、コンパイル関数とリンク関数の章で説明されています) は、 が であること#1ですcompile function。ここでは、複製の場合にすべての要素に複製する必要がある DOM 変換を練習する必要があります。Datepicker は DOM を変更するだけでなく、そこからイベントをリッスンする必要があるため、これは Datepicker には当てはまりません。ディレクティブを持つ子要素を追加する場合、またはディレクティブを子要素に追加する場合、ここで実行するとコンパイルされます。

#2andはpreLinking function、コンパイル後、関数をリンクする子の前に呼び出されます。これは、DOM を変更できないことを意味します。これは、リンカの次の反復で、コンパイル関数によって以前にインデックス付けされた要素を見つけようとして失敗するためです。#3andはpostLinking function、すべての子がリンクされた後に呼び出され、単一の変更を適用したり、イベントをリッスンしたり、きちんとしたことをしたりするのに最も安全な場所です。

functionオブジェクトの代わりに a を返すこともでき{pre: , post: }ます。#3この場合、 ( )と同じ動作になりpostLinking functionます。最後に、#4と同じ#3です。がある場合は無視されます#3。

複数のディレクティブの場合、要素自体またはその子で、 allcompile functionより all preLinking functions、次に allが実行されますpostLinking functions

さて、主な質問に: #3、コンパイル機能が必要な場合。compileそうでない場合は、プロパティをドロップして#4.

これらの動作を説明するためにフィドルを作成しました。

image not loading については、 Angular でプロパティを補間する必要があるため、 に変更<img ng-src="image">する必要があります。<img ng-src="{{image}}">src

于 2013-03-04T11:46:17.787 に答える