☰

同じディレクティブのリンク関数内でディレクティブコントローラの関数を使用する 質問する

tag-icon • tag-icon angularjs angularjs-directive
同じディレクティブのリンク関数内でディレクティブコントローラの関数を使用する 質問する

おそらく、私はディレクティブ コントローラの動作について根本的な誤解をしているのでしょう。私の理解では、ディレクティブ コントローラは、他のディレクティブやコントローラに公開される一種の API として使用されます。コントローラとリンク関数が内部的に通信できるようにしたいと考えています。

たとえば、コントローラー関数を介して変数を設定し、それをリンク関数で使用できるようにしたいと考えています。

var app = angular.module('test-app', []);

app.directive('coolDirective', function () {
    return {
        controller: function () {
            this.sayHi = function($scope, $element, $attrs) {
                $scope.myVar = "yo"
            }
        },
        link: function(scope, el, attrs) {
            console.log(scope.myVar);
        }   
    }
});

リンク関数内で myVar または sayHi にアクセスするにはどうすればよいでしょうか? それとも、要点を完全に見逃しているのでしょうか?

ベストアンサー1

コントローラーの $scope (関数ではなくコントローラーで定義されますsayHi) とリンクは両方ともscope同じです。コントローラーで何かを設定すると、リンクから使用できるようになります。またはその逆も同様です。

問題は、それがsayHi決して実行されない関数であり、myVar決して設定されないことです。

sayHiはスコープ内にないため、コントローラーへの参照が必要であり、それを実行するには、次のように 4 番目のパラメーターを追加します。

link: function(scope, element, attr, ctrl) {}

次に、 を実行できますctrl.sayHi()(ただし、 のパラメータはsayHiコントローラー関数に属します)。

別のコントローラーが必要で、そのコントローラーのディレクティブも使用したい場合は、そのコントローラーも必要になります。そのため、coolDirectiveコントローラーにアクセスする必要がある場合はnotCoolAtAll、次のようにします。

require: ['coolDirective', 'notCoolAtAll']

これでうまくいきます。link関数は 4 番目のパラメータとしてコントローラーの配列を受け取ります。この場合、最初の要素はcoolDirectivectrl で、2 番目の要素はnotCoolAtAllone になります。

ここに小さな例があります:http://plnkr.co/edit/JXahWE43H3biouygmnOX?p=preview

おすすめ記事