1. ホーム
  2. ジャバスクリプト

[解決済み】Angular JS:すでにスコープを持つディレクティブのコントローラを持っている場合、ディレクティブのリンク関数の必要性は何ですか?

2022-04-09 13:57:34

質問

スコープとテンプレートに対して何らかの操作を行いたいのですが、どうすればよいですか?このような操作は 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 という関数がありますが、すでにコントローラを持っているのでしょうか?

どのように解決するのですか?

私の 初期 との格闘。 linkcontroller という関数があり、それについて多くの本を読んだのですが、今、私はその答えを持っていると思います。

まず最初に 理解する ,

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 関数も同様ですが、その内容は 懸念の分離 .

したがって、最終的には、すべてのピースが完璧にフィットする次のようなものが出来上がりました。