require
Instrukcja daje sterownik do dyrektywy to nazwę jako czwarty argument do swojej link
funkcji. (Możesz użyć ^
do wyszukania kontrolera w elemencie nadrzędnym; ?
sprawia , że jest opcjonalny.) Więc require: 'ngModel'
daje ci kontroler dla ngModel
dyrektywy, którym jest plikngModelController
.
Kontrolery dyrektywy można napisać w celu zapewnienia interfejsów API, z których mogą korzystać inne dyrektywy; z ngModelController
, uzyskujesz dostęp do specjalnych wbudowanych funkcji, w ngModel
tym do pobierania i ustawiania wartości. Rozważmy następujący przykład:
<input color-picker ng-model="project.color">
app.directive('colorPicker', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, ngModel) {
element.colorPicker({
pickerDefault: scope.color,
onColorChange: function(id, newValue) {
scope.$apply(function() {
ngModel.$setViewValue(newValue);
});
}
});
ngModel.$render = function() {
element.val(ngModel.$modelValue);
element.change();
};
}
}
});
Ta dyrektywa używa ngModel
kontrolera do pobierania i ustawiania wartości koloru z próbnika kolorów. Zobacz ten przykład JSFiddle: http://jsfiddle.net/BinaryMuse/AnMhx/
Jeśli używasz require: 'ngModel'
, prawdopodobnie nie powinieneś także używać ngModel: '='
w swoim zakresie izolowanym; ngModelController
daje cały dostęp trzeba zmienić wartość.
Dolny przykład na stronie domowej AngularJS również wykorzystuje tę funkcjonalność (z wyjątkiem używania niestandardowego kontrolera, nie ngModel
).
Jeśli chodzi o wielkość liter dyrektywy, na przykład ngModel
vs ng-model
vs data-ng-model
: podczas gdy Angular obsługuje używanie wielu formularzy w DOM, to kiedy odwołujesz się do dyrektywy po nazwie (na przykład podczas tworzenia dyrektywy lub używania require
), zawsze używasz lowerCamelCase forma nazwy.
ng-model='property'