Nie można znaleźć kontrolera „ngModel”, wymaganego przez dyrektywę „…”

88

Co tu się dzieje?

Oto moja dyrektywa:

app.directive('submitRequired', function (objSvc) {
    return {
        require: 'ngModel',
        link: function (scope, elm, attrs, ctrl) {

          // do something
        }
    };
});

Oto przykład używanej dyrektywy: 

<input submit-required="true"></input>

Oto rzeczywisty tekst błędu:

Error: [$compile:ctreq] Controller 'ngModel', required by directive 'submitRequired', can't be found!
http://errors.angularjs.org/1.2.2/$compile/ctreq?p0=ngModel&p1=submitRequired
    at http://www.domain.ca/Scripts/angular/angular.js:78:12
    at getControllers (http://www.domain.ca/Scripts/angular/angular.js:5972:19)
    at nodeLinkFn (http://www.domain.ca/Scripts/angular/angular.js:6139:35)
    at compositeLinkFn (http://www.domain.ca/Scripts/angular/angular.js:5550:15)
    at nodeLinkFn (http://www.domain.ca/Scripts/angular/angular.js:6132:24)
    at compositeLinkFn (http://www.domain.ca/Scripts/angular/angular.js:5550:15)
    at publicLinkFn (http://www.domain.ca/Scripts/angular/angular.js:5458:30)
    at http://www.domain.ca/Scripts/angular/angular.js:1299:27
    at Scope.$get.Scope.$eval (http://www.domain.ca/Scripts/angular/angular.js:11634:28)
    at Scope.$get.Scope.$apply (http://www.domain.ca/Scripts/angular/angular.js:11734:23) <input submit-required="true"> angular.js:9159
(anonymous function) angular.js:9159
$get angular.js:6751
nodeLinkFn angular.js:6141
compositeLinkFn angular.js:5550
nodeLinkFn angular.js:6132
compositeLinkFn angular.js:5550
publicLinkFn angular.js:5458
(anonymous function) angular.js:1299
$get.Scope.$eval angular.js:11634
$get.Scope.$apply angular.js:11734
(anonymous function) angular.js:1297
invoke angular.js:3633
doBootstrap angular.js:1295
bootstrap angular.js:1309
angularInit angular.js:1258
(anonymous function) angular.js:20210
trigger angular.js:2315
(anonymous function) angular.js:2579
forEach angular.js:300
eventHandler angular.js:2578ar.js:7874
angularjs directive Shaun Luttin
źródło

Odpowiedzi:

127

Jak opisano tutaj: Angular NgModelController , należy zapewnić <inputwymagany kontrolerngModel

<input submit-required="true" ng-model="user.Name"></input>
Radim Köhler
źródło
1
Idealny. Doceniam to! Oznaczę to jako odpowiedź. Mam dodatkowe pytanie. Czy powinienem opublikować kolejne pytanie lub zmienić oryginał?
Shaun Luttin
Oto kontynuacja: stackoverflow.com/questions/21807929/…
Shaun Luttin,
2
błędnie wpisałem ng-modelsi otrzymałem ten błąd.
chovy
@Radim Kohler Cieszę się, że twoja odpowiedź faktycznie pomogła komuś w potrzebie, ja sam jestem blisko osiągnięcia tego. Na podstawie powyższej instrukcji wejściowej dla atrybutu „ng-model” mogę użyć konkatenacji ciągów, na przykład „{{RootObjectName +”. „+ ModelName}}” ?? !! Ponieważ moje modele w $ scope nie są proste i są dynamicznie tworzone w kontrolerze na podstawie danych wejściowych z DB
pavan kumar.
@pavankumar sprawdź ten link next.plnkr.co/edit/ ... to ng-model="RootObject[alias]"zadziała, jeśli sesja będzie miała `$ scope.RootObject = {}; $ scope.alias = "FirstName" `... instaead aliasu, nawet forEach może dostarczyć dynamiczną nazwę
Radim Köhler
8

Jednym z możliwych rozwiązań tego problemu jest ng-modelatrybut wymagany do korzystania z tej dyrektywy.

Dlatego dodanie atrybutu „ng-model” może rozwiązać problem.

<input submit-required="true" ng-model="user.Name"></input>
Baran
źródło
To rozwiązało moje. Dzięki. Myślę, że przegapiliśmy punkt, w którym aby wyzwolić zmianę ng, powinien istnieć model ng, który jest powiązany z elementem.
antOND
1

Możesz także usunąć linię 

  require: 'ngModel',

jeśli nie potrzebujesz ngModelw tej dyrektywie. Usunięcie ngModelpozwoli ci stworzyć dyrektywę bez tego ngModelbłędu.

steampowered
źródło
0

Napotkałem ten sam błąd, w moim przypadku nie napisałem dyrektywy ng-model, coś w rodzaju "ng-moel"

Zły: ng-moel = "user.name" Dobrze: ng-model = "user.name"

wprowadź opis obrazu tutaj

Shahidul Haque
źródło