Was sind die Links: Funktion "Parameter" (Scope, Element, Attrs)? AngularJS

Question

Also ich benutze AngularJS seit ein paar Monaten und ich habe das Internet und meine AngularJS Direktiven durchforstet, um eine Antwort darauf zu finden.

In Richtlinien, sehe ich fast immer diesen Codeblock:

link: function(scope, element, attrs) { 
    //body 
} 

Was genau die Elemente innerhalb der Funktion "Rahmen, Element, attrs" sind? Das könnte eine dumme Frage sein, aber ich kann die Antwort nirgends finden.

Danke!

Answer 1

die Parameter scope, element und attrs sind für die benutzerdefinierte Richtlinie definiert sind, gemäß der Dokumentation here, aber Sie können sie zu Ihrer umbenennen.

scope: Dies ist der Rahmen für die benutzerdefinierte Richtlinie ist, ähnlich wie die $scope in einem Controller

element: Das ist das Element Ihrer benutzerdefinierten Richtlinie

attrs: dies ist der Satz von Attributen in Ihre benutzerdefinierte Anweisung. (Sollte die Attribute des Elements sein, dank @zeroflagL für die Korrektur!)

Zum Beispiel, wenn Sie eine benutzerdefinierte Richtlinie myDirective genannt bauen, und Sie würden es wahrscheinlich in Ihrem HTML partials wie folgt verwenden:

<my-directive num-rows="3"></my-directive> 

Hier

ist die num-rows ein Attribut für die Richtlinie, und Sie können den Wert in Ihrer link Funktion erhalten:

function link(scope, element, attrs) { 
    console.log('num-rows:', attrs.numRows); 
    //you can change its value, too 
    attrs.$set('numRows', '10'); //attrs setter 

    //you can watch for its changes to trigger some event 
    attrs.$observe('numRows', function(newVal) { 
     console.log('trigger some event for the changes in numRows here'); 
    }); 
} 

auch in der Link-Funktion oben, können Sie das Element/directive binden eine Aktion:

element.bind('click', function() { 
    console.log('do something with the click event'); 
}); 

Ich schlage vor, Sie verbringen etwas Zeit, die Dokumentation zu lesen. Die Verknüpfungsfunktion kann einen vierten Parameter annehmen, der der Controller einer anderen Direktive ist, die Sie in Ihrer benutzerdefinierten Anweisung benötigen. zB:

require: '^ngModel' 
.... 

function link(scope, element, attrs, ngModelCtrl) { 
    .... 
} 

Answer 2

Umfang: Dies ist der Rahmen für die benutzerdefinierte Richtlinie, ähnlich dem $scope in einem Controller

Element: Das ist das Element Ihrer benutzerdefinierten Richtlinie ist

attrs: attrs nichts als ein Parameter