[解決済み】Angular JS:すでにスコープを持つディレクティブのコントローラを持っている場合、ディレクティブのリンク関数の必要性は何ですか?
質問
スコープとテンプレートに対して何らかの操作を行いたいのですが、どうすればよいですか?このような操作は
link
関数か
controller
関数にアクセスできます(どちらもスコープにアクセスできるため)。
どのような場合に
link
関数で、コントローラではないのですか?
angular.module('myApp').directive('abc', function($timeout) {
return {
restrict: 'EA',
replace: true,
transclude: true,
scope: true,
link: function(scope, elem, attr) { /* link function */ },
controller: function($scope, $element) { /* controller function */ }
};
}
また、私は、以下のことを理解しています。
link
は非角度の世界です。だから、私は
$watch
,
$digest
と
$apply
.
の意味は何ですか?
link
という関数がありますが、すでにコントローラを持っているのでしょうか?
どのように解決するのですか?
私の
初期
との格闘。
link
と
controller
という関数があり、それについて多くの本を読んだのですが、今、私はその答えを持っていると思います。
まず最初に 理解する ,
angularディレクティブの仕組みを簡単に説明します。
-
まず、テンプレート(文字列として、または文字列に読み込まれたもの)から始めます。
var templateString = '<div my-directive>{{5 + 10}}</div>';
-
さて、この
templateString
としてラップされます。 angular要素var el = angular.element(templateString);
-
と
el
でコンパイルします。$compile
を取得するために リンク 関数を使用します。var l = $compile(el)
以下は、その様子です。
-
$compile
は、テンプレート全体を走査して、認識できるすべてのディレクティブを収集します。 -
発見されたすべてのディレクティブは
再帰的にコンパイル
とその
link
の関数が収集される。 -
次に、すべての
link
関数は、新しいlink
関数として返されます。l
.
-
-
最後に
scope
という関数で、このl
(リンク) 関数で、ラップされたリンク関数をさらに実行します。scope
とそれに対応する要素で構成されます。l(scope)
-
これは
template
を新しいノードとしてDOM
を起動しcontroller
にそのウォッチを追加します。 スコープ で、DOM でテンプレートと共有されます。
比較 コンパイル 対 リンク 対 コントローラ :
-
すべてのディレクティブは コンパイル は一度だけであり リンク 関数は再利用のために保持されます。したがって、ディレクティブのすべてのインスタンスに適用できるものがある場合は、ディレクティブの
compile
関数を使用します。 -
さて、コンパイルの結果、私たちは
link
をアタッチしている間に実行される関数です。 テンプレート を DOM . したがって、ディレクティブのすべてのインスタンスに固有のすべてを実行するわけです。例えば イベントアタッチメント , スコープに基づくテンプレートの変更 など。 -
最後に コントローラ は、ディレクティブが
DOM
(アタッチされた後)です。そのため(1) ビュー[]を設定した後 V ] (つまりテンプレート)にリンクを貼る。
$scope
は、私たちの[? M ] と$controller
は、私たちの [ C の中にある M V C(2) 2ウェイ とのバインディングは スコープ をウォッチ設定することで
(3)
$scope
はコントローラで追加されることが期待されています。(4) 最後に
controller
は、関連するディレクティブの間で通信できるようにするためにも使用されます。(例えばmyTabs
の例 https://docs.angularjs.org/guide/directive )(5) たしかに、これだけのことを
link
関数も同様ですが、その内容は 懸念の分離 .
したがって、最終的には、すべてのピースが完璧にフィットする次のようなものが出来上がりました。
関連
-
[解決済み】Uncaught TypeError: nullのプロパティ'value'を読み取ることができない
-
[解決済み】React、Uncaught ReferenceError。ReactDOMは定義されていません
-
[解決済み] AngularJS 。scope.apply()呼び出し時の$digest already in progressエラーを防ぐ。
-
[解決済み] JavaScriptの変数のスコープとは何ですか?
-
[解決済み] angular-routeとangular-ui-routerの違いは何ですか?
-
[解決済み】関数の前のエクスクラメーションマークは何をするのですか?
-
[解決済み】AngularJSのディレクティブスコープにおける「@」と「=」の違いは何ですか?
-
[解決済み】AngularJSのスコーププロトタイピング/プロトタイピング継承のニュアンスとは?
-
[解決済み】ディレクティブ定義のtranscludeオプションの理解?
-
[解決済み] Angularでtransclude 'true'とtransclude 'element'を使用するタイミングは?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】JavaScriptのgetElementByNameが機能しない
-
[解決済み】Google Conversionsが動作しない - スクリプトが読み込まれない
-
[解決済み】「Uncaught TypeError: Chromeで "Illegal invocation "が発生する。
-
[解決済み] テスト
-
[解決済み】Reactのeslintエラーはpropsの検証で見つからない
-
[解決済み】Javascript - ERR_CONTENT_LENGTH_MISMATCH
-
[解決済み】JS ファイルが net::ERR_ABORTED 404 (Not Found) を取得する)
-
[解決済み】TypeError:res.jsonは関数ではありません。
-
[解決済み】HTMLの最初の行に予期しないトークン<がある。
-
[解決済み】react router v^4.0.0 Uncaught TypeError: 未定義のプロパティ'location'を読み取れない