Controller 'ngModel', benötigt von Direktive '...', kann nicht gefunden werden

Question

Was ist hier los?

Hier meine Richtlinien sind:

// 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 
     } 
    }; 
}); 

Hier ist ein Beispiel der Richtlinie im Einsatz:

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

Hier ist der eigentliche Fehlertext:

Fehler: [$ Kompilierung: ctreq] Controller 'ngModel', benötigt durch Direktive 'submitRequired', kann nicht gefunden werden! http://errors.angularjs.org/1.2.2/ $ kompilieren/ctreq? P0 = ngModel & p1 = submitRequired bei http://www.domain.ca/Scripts/angular/angular.js:78:12 bei getControllers (http://www.domain.ca/Scripts/angular/angular.js:5972:19) bei nodeLinkFn (http://www.domain.ca/Scripts/angular/angular.js:6139:35) bei compositeLinkFn (http://www.domain.ca/Scripts/angular/angular.js:5550:15) bei nodeLinkFn (http://www.domain.ca/Scripts/angular/angular.js:6132:24) bei compositeLinkFn (http://www.domain.ca/Scripts/angular/angular.js:5550:15) bei publicLinkFn .... (http://www.domain.ca/Scripts/angular/angular.js:5458:30) bei http://www.domain.ca/Scripts/angular/angular.js:1299:27 bei Scope $ get.Scope $ eval (http://www.domain.ca/Scripts/angular/angular.js:11634:28) bei Scope $ get.Scope gelten $ (http://www.domain.ca/Scripts/angular/angular.js:11734:23) Angularjs: 9159 (anonyme Funktion) Angularjs: 9159 $ erhalten Angularjs: 6751 nodeLinkFn Angularjs: 6141 compositeLinkFn Angularjs: 5550 nodeLinkFn Angularjs: 6132 compositeLinkFn Angularjs: 5550 publicLinkFn eckig. js: 5458 (anonyme Funktion) Angularjs. 1299 $ get.Scope $ eval Angularjs: 11634 $ get.Scope $ gelten Angularjs. 11734 (anonyme Funktion) Angularjs: 1297 Rufen Sie angular.js: 3633 doBootstrap angular.js: 1295 bootstrap angular.js: 1309 angularInit angular.js: 1258 (anonyme Funktion) angular.js: 20210 Trigger Angularjs: 2315 (anonym Funktion) Angularjs: 2579 forEach Angularjs: 300 Angularjs Eventhandler: 2578ar.js: 7874

Answer 1

Nur für den Fall, dass die obigen <input> Schnipsel nicht enthalten einen Tippfehler, das ist das Problem:

the-model 

wir ng-model brauchen

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

Winkel wird unter Verwendung von normalisierten/denormalized Namenskonventionen, die an der Ende bedeutet: ng-model ist die HTML-Weise, wie man die ngModel ausdrückt. HTML ist case insensitive ... und das löst dieses Problem

Vorschlag.Wenn wir mit mehreren Richtlinien zu einem Element angewendet arbeiten:

• bse-Eingang
• Absende-erforderlich

sollten wir lassen sie beide mit einem Standard INPUT-Einstellungen zu arbeiten. Beide sollten also ein ng-Modell benötigen, um auf das an die Eingabe übergebene Modell zugreifen zu können.

wenn die Modell andere Einstellung darstellen sollte, was absolut in Ordnung ist, müssen wir uns einfach nicht überspringen die auch ng-Modell vorbei

Über require:

Wenn Sie verschachtelte Richtlinien haben, die müssen miteinander kommunizieren, der Weg zu tun dies durch einen Controller.

Andere Direktiven können diesen Controller mit der Eigenschaft require Syntax übergeben haben. Die vollständige Form von erfordern wie folgt aussieht:

require: '^?directiveName' 

Erläuterungen zur Saite benötigen:

• directiveName: Dieses Kamel Gefassten Namen geben an, welche die Steuerung Richtlinie sollte kommen. Also, wenn unsere Direktive einen Controller auf seinem Eltern finden muss, würden wir es als myMenu schreiben.
• ^ Standardmäßig erhält Angular den Controller von der benannten Direktive für dasselbe Element. Durch das Hinzufügen dieses optionalen ^ -Symbols können Sie auch den DOM-Baum aufsuchen, um die Direktive zu finden. Für das Beispiel würden wir benötigen, um dieses Symbol hinzuzufügen; Die letzte Zeichenfolge wäre \^myMenu.
• ? Wenn der erforderliche Controller nicht gefunden wird, löst Angular eine Ausnahme aus, um Sie über das Problem zu informieren. Hinzufügen a? Symbol für die Zeichenfolge besagt, dass dieser Controller optional ist und dass keine Ausnahme ausgelöst werden soll, wenn nicht gefunden wird. Obwohl es unwahrscheinlich klingt, wenn wir s ohne einen Container verwendet werden möchten, könnten wir dies für eine letzte erforderliche Zeichenfolge von? \^MyMenu hinzufügen.