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

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"

— Shahidul Haque
quelle