To jest kod HTML mojej dyrektywy:
<textarea data-modal="modal" data-mydir ng:model="abc"></textarea>
W mojej dyrektywie mam to:
return {
require: 'ngModel',
replace: true,
scope: {
modal: '=modal',
ngModel: '=',
pid: '=pid'
},
Czy ktoś może mi powiedzieć, jakie jest znaczenie wymagania: „ngModel”? Widzę to w wielu różnych dyrektywach. Czy mogę nazwać to modalnym?
Jestem zdezorientowany, ponieważ kiedy zmieniam go na modalny danych, otrzymuję wiadomość od Angulara
Controller 'ngModel', required by directive 'textarea', can't be found!
ng-model='property'
Odpowiedzi:
require
Instrukcja daje sterownik do dyrektywy to nazwę jako czwarty argument do swojejlink
funkcji. (Możesz użyć^
do wyszukania kontrolera w elemencie nadrzędnym;?
sprawia , że jest opcjonalny.) Więcrequire: 'ngModel'
daje ci kontroler dlangModel
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, wngModel
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({ // 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(); }; } } });
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
vsng-model
vsdata-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żywaniarequire
), zawsze używasz lowerCamelCase forma nazwy.źródło
require: 'ngModel'
należy go używaćngModel: '='
?Zgodnie z dokumentacją dotyczącą tworzenia dyrektyw niestandardowych : (Najpierw pytanie w komentarzu)
Odpowiedź:
Przykłady:
Po drugie, co
?ngModel
reprezentuje?// Always use along with an ng-model require: '?ngModel',
Podczas korzystania z dyrektywy wymusza użycie jej wraz z atrybutem / kontrolerem
ng-model
.require
ustawienie(Wyciąg z książki AngularJS autorstwa Brada Greena i Shyama Seshadri)
źródło
require:'ngModel'
Irequire:'^ngModel'
pozwalają wstrzyknąć modelu dołączony do elementu lub jego elementu nadrzędnego, w którym dyrektywa jest związany.Jest to w zasadzie najłatwiejszy sposób na przekazanie ngModel do funkcji link / kompilacji zamiast przekazywania go za pomocą opcji zakresu. Po uzyskaniu dostępu do ngModel możesz zmienić jego wartość za pomocą
$setViewValue
, zabrudzić / wyczyścić za pomocą$formatters
, zastosować obserwatory itp.Poniżej znajduje się prosty przykład przekazania ngModel i zmiany jego wartości po 5 sekundach.
Demo: http://jsfiddle.net/t2GAS/2/
myApp.directive('myDirective', function($timeout) { return { restrict: 'EA', require: 'ngModel', link: function(scope, element, attrs, ngModel) { ngModel.$render = function() { $timeout(function() { ngModel.$setViewValue('StackOverflow'); }, 5000); }; } }; });
źródło