Le contrôleur 'ngModel', requis par la directive '…', est introuvable

88

Que se passe t-il ici?

Voici ma directive:

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

          // do something
        }
    };
});

Voici un exemple de la directive en cours d'utilisation:

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

Voici le texte d'erreur réel:

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
source

127

Comme décrit ici: Angular NgModelController , vous devez fournir le <inputcontrôleur requisngModel

<input submit-required="true" ng-model="user.Name"></input>

— Radim Köhler
source

1

Parfait. J'apprécie ça! Je marquerai ceci comme réponse. J'ai une question complémentaire. Dois-je publier une autre question ou modifier mon original?

— Shaun Luttin le

Voici la suite: stackoverflow.com/questions/21807929/…

— Shaun Luttin

2

j'avais tapé par erreur ng-modelset obtenu cette erreur.

— chovy

@Radim Kohler Je suis heureux que votre réponse ait réellement aidé quelqu'un dans le besoin, je suis moi-même sur le point d'y parvenir. À partir de l'instruction d'entrée ci-dessus, pour l'attribut "ng-model", puis-je utiliser une concaténation de chaînes comme "{{RootObjectName +". "+ ModelName}}" ?? !! Comme mes modèles dans la portée $ ne sont pas simples et sont créés dynamiquement dans le contrôleur en fonction des entrées de DB

— pavan kumar

@pavankumar vérifiez ce lien next.plnkr.co/edit/ ... cela ng-model="RootObject[alias]"fonctionnera si la session aura `$ scope.RootObject = {}; $ scope.alias = "FirstName" `... au lieu de l'alias, même forEach pourrait fournir le nom dynamique

— Radim Köhler

8

Une solution possible à ce problème est que l' ng-modelattribut est nécessaire pour utiliser cette directive.

Par conséquent, l'ajout de l'attribut 'ng-model' peut résoudre le problème.

<input submit-required="true" ng-model="user.Name"></input>

— RAM
source

Cela a résolu le mien. Merci. Je pense que nous avons manqué le point que pour déclencher ng-change, il devrait y avoir un ng-model lié à l'élément.

— antonD

1

Vous pouvez également supprimer la ligne

  require: 'ngModel',

si vous n'en avez pas besoin ngModeldans cette directive. La suppression ngModelvous permettra de créer une directive sans cette ngModelerreur.

— à vapeur
source

0

J'ai rencontré la même erreur, dans mon cas, j'ai mal orthographié la directive ng-model quelque chose comme "ng-moel"

Mauvais: ng-moel = "user.name" Bon: ng-model = "user.name"

— Shahidul Haque
source