Die require
Anweisung gibt Ihnen den Controller für die Direktive, die Sie als viertes Argument für Ihre link
Funktion benennen . (Sie können verwenden ^
, um nach dem Controller in einem übergeordneten Element zu suchen. Dies ?
ist optional.) require: 'ngModel'
Sie erhalten also den Controller für die ngModel
Direktive, bei der es sich um eine handeltngModelController
.
Direktiven-Controller können so geschrieben werden, dass sie APIs bereitstellen, die andere Direktiven verwenden können. Mit erhalten ngModelController
Sie Zugriff auf spezielle Funktionen, die integriert sind ngModel
, einschließlich Abrufen und Festlegen des Werts. Betrachten Sie das folgende Beispiel:
<input color-picker ng-model="project.color">
app.directive('colorPicker', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, ngModel) {
element.colorPicker({
// initialize the color to the color on the scope
pickerDefault: scope.color,
// update the ngModel whenever we pick a new color
onColorChange: function(id, newValue) {
scope.$apply(function() {
ngModel.$setViewValue(newValue);
});
}
});
// update the color picker whenever the value on the scope changes
ngModel.$render = function() {
element.val(ngModel.$modelValue);
element.change();
};
}
}
});
Diese Anweisung verwendet den ngModel
Controller, um den Wert der Farbe vom Farbpicker abzurufen und einzustellen. Siehe dieses JSFiddle-Beispiel: http://jsfiddle.net/BinaryMuse/AnMhx/
Wenn Sie verwenden require: 'ngModel'
, sollten Sie wahrscheinlich nicht auch verwenden werden ngModel: '='
in Ihrem Isolat Umfang; Das ngModelController
gibt Ihnen allen Zugriff, den Sie benötigen, um den Wert zu ändern.
Das untere Beispiel auf der AngularJS-Homepage verwendet diese Funktionalität ebenfalls (außer bei Verwendung eines benutzerdefinierten Controllers, nicht ngModel
).
Was das Gehäuse einer Direktive betrifft, z. B. ngModel
vs ng-model
vs data-ng-model
: Während Angular die Verwendung mehrerer Formulare im DOM unterstützt require
, verwenden Sie immer den LowerCamelCase , wenn Sie namentlich auf eine Direktive verweisen (z. B. beim Erstellen einer Direktive oder beim Verwenden einer Direktive ) Form des Namens.
ng-model='property'