Der Controller 'ngModel', der von der Direktive '…' gefordert wird, kann nicht gefunden werden

88

Was ist denn hier los?

Hier ist meine Anweisung:

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

          // do something
        }
    };
});

Hier ist ein Beispiel für die verwendete Richtlinie: 

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

Hier ist der eigentliche Fehlertext:

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
quelle

Antworten:

126

Wie hier beschrieben: Angular NgModelController , sollten Sie den <inputmit dem erforderlichen Controller versehenngModel

<input submit-required="true" ng-model="user.Name"></input>
Radim Köhler
quelle
1
Perfekt. Ich weis das zu schätzen! Ich werde dies als Antwort markieren. Ich habe eine Folgefrage. Soll ich eine andere Frage stellen oder mein Original ändern?
Shaun Luttin
Hier ist das Follow-up: stackoverflow.com/questions/21807929/…
Shaun Luttin
2
Ich hatte fälschlicherweise getippt ng-modelsund diesen Fehler erhalten.
Chovy
@Radim Kohler Ich bin froh, dass Ihre Antwort tatsächlich jemandem in Not geholfen hat. Ich selbst bin kurz davor, dies zu erreichen. Kann ich aus der obigen Eingabeanweisung für das Attribut "ng-model" eine Zeichenfolgenverkettung wie "{{RootObjectName +". "+ ModelName}}" ?? !! verwenden? Da meine Modelle im $
-Bereich
@pavankumar überprüfen Sie diesen Link next.plnkr.co/edit/… dies ng-model="RootObject[alias]"funktioniert, wenn die Sitzung `$ scope.RootObject = {} hat; $ scope.alias = "Vorname" `... anstelle von Alias, auch für jeden könnte der dynamische Name angegeben werden
Radim Köhler
8

Eine mögliche Lösung für dieses Problem ist, dass ein ng-modelAttribut erforderlich ist, um diese Anweisung zu verwenden.

Daher kann das Problem durch Hinzufügen des Attributs 'ng-model' behoben werden.

<input submit-required="true" ng-model="user.Name"></input>
RAM
quelle
Dies löste meine. Vielen Dank. Ich denke, wir haben den Punkt übersehen, dass es eine ng-Modellbindung an das Element geben sollte, um ng-change auszulösen.
antonD
1

Sie können die Linie auch entfernen 

  require: 'ngModel',

wenn Sie ngModelin dieser Richtlinie nicht benötigen . Durch Entfernen ngModelkönnen Sie eine Anweisung ohne diesen ngModelFehler erstellen.

dampfbetrieben
quelle
0

Ich hatte den gleichen Fehler, in meinem Fall habe ich die ng-model-Direktive so etwas wie "ng-moel" falsch geschrieben.

Falsch: ng-moel = "user.name" Richtig: ng-model = "user.name"

Geben Sie hier die Bildbeschreibung ein

Shahidul Haque
quelle