web-dev-qa-db-fra.com

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

Que se passe t-il ici?

Voici mes directives:

// template <input ng-model="theModel"  />
app.directive('bseInput', function () {
    return {
        templateUrl: "/Scripts/bse/bse-inputs.html",
        scope:
        {
            theModel: '=',
        },
        compile: function compile(tElement, tAttrs, transclude) {

            // do stuff

        }
    };
});


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

          // do something
        }
    };
});

Voici un exemple de la directive utilisée:

<input bse-input submit-required="true" the-model="someModel"></input>

Voici le texte d'erreur réel:

Erreur: [$ compile: ctreq] Le contrôleur 'ngModel', requis par la directive 'submitRequired', est introuvable! http://errors.angularjs.org/1.2.2/ $ compile/ctreq? p0 = ngModel & p1 = submitRequired at http://www.domain.ca/Scripts/angular/ angular.js: 78: 12 chez getControllers ( http://www.domain.ca/Scripts/angular/angular.js:5972:19 ) chez nodeLinkFn ( http : //www.domain.ca/Scripts/angular/angular.js: 6139: 35 ) à compositeLinkFn ( http://www.domain.ca/Scripts/angular/angular.js:5550 : 15 ) sur nodeLinkFn ( http://www.domain.ca/Scripts/angular/angular.js:6132:24 ) sur compositeLinkFn ( http: // www .domain.ca/Scripts/angular/angular.js: 5550: 15 ) sur publicLinkFn ( http://www.domain.ca/Scripts/angular/angular.js:5458: =) sur http://www.domain.ca/Scripts/angular/angular.js:1299:27 sur Scope. $ get.Scope. $ eval ( http: // www.domain.ca/Scripts/angular/angular.js:11634:28 ) sur Scope. $ get.Scope. $ apply ( http://www.domain.ca/Scripts/angular/ angular.js: 11734: 2 ) angular.js: 9159 (fonction anonyme) angular.js: 9159 $ get angular.js: 6751 nodeLinkFn angular.js: 6141 composite LinkFn angular.js: 5550 nodeLinkFn angular.js: 6132 compositeLinkFn angular.js: 5550 publicLinkFn angular.js: 5458 (fonction anonyme) angular.js: 1299 $ get.Scope. $ Eval angular.js: 11634 $ get.Scope. $ apply angular.js: 11734 (fonction anonyme) angular.js: 1297 invoke angular.js: 3633 doBootstrap angular.js: 1295 bootstrap angular.js: 1309 angularInit angular.js: 1258 ( fonction anonyme) angular.js: 20210 trigger angular.js: 2315 (fonction anonyme) angular.js: 2579 forEach angular.js: 300 eventHandler angular.js: 2578ar.js: 7874

angularjsdirective
15
Shaun Luttin

Au cas où, ce qui précède <input> l'extrait ne contient pas de faute de frappe, voici le problème:

the-model

nous avons besoin ng-model

<input bse-input submit-required="true" ng-model="someModel.Property"></input>

angulaire utilise des conventions de dénomination normalisées/dénormalisées, ce qui signifie à la fin: ng-model est la façon html d'exprimer le ngModel. Le HTML n'est pas sensible à la casse ... et cela résout ce problème

Suggestion. Si nous travaillons avec plusieurs directives appliquées à un élément:

  • entrée bse
  • soumettre-requis

Nous devrions laisser les deux travailler avec les paramètres standard INPUT. Ainsi, les deux devraient nécessiter ng-model, comme moyen d'accéder au modèle passé en entrée.

si le modèle doit représenter un paramètre différent, ce qui est tout à fait correct, nous n'avons tout simplement pas à sauter le modèle ng

À propos de require:

Lorsque vous avez des directives imbriquées qui doivent communiquer entre elles, la façon de le faire est via un contrôleur.

D'autres directives peuvent recevoir ce contrôleur avec la syntaxe de propriété require. La forme complète de require ressemble à:

require: '^?directiveName'

Explications de la chaîne requise:

  • directiveName: ce nom en forme de chameau spécifie de quelle directive le contrôleur doit provenir. Donc, si notre directive doit trouver un contrôleur sur son parent, nous l’écrirons en tant que monMenu.
  • ^ Par défaut, Angular obtient le contrôleur de la directive nommée sur le même élément. L'ajout de ce symbole ^ facultatif indique également de remonter l'arborescence DOM pour trouver la directive. Par exemple, nous 'aurais besoin d'ajouter ce symbole; la chaîne finale serait\^ monMenu.
  • ? Si le contrôleur requis n'est pas trouvé, Angular lèvera une exception pour vous informer du problème. L'ajout d'un symbole? À la chaîne indique que ce contrôleur est facultatif et qu'une exception ne devrait pas '' t être jeté s'il n'est pas trouvé. Bien que cela semble peu probable, si nous voulions laisser s être utilisé sans conteneur, nous pourrions l'ajouter pour une chaîne finale requise de?\^ myMenu.
22
Radim Köhler