Controller 'ngModel', required by directive '…', can't be found

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

Just in case, that the above <input> snippet does not contain a typo, this is the issue:

the-model

we need ng-model

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

angular is using normalized/denormalized naming conventions, which at the end means: ng-model is the html way how to express the ngModel. HTML is case insensitive... and this solves this issue

Suggestion. If we are working with multiple directives applied to one element:

bse-input
submit-required

We should let both of them to work with a standard INPUT settings. So, both should could require ng-model, as a way how to access the model passed to input.

if the-model should be representing different setting, which is absolutely ok, we just do not have to skip passing the ng-model as well

About require:

When you have nested directives that need to communicate with each other, the way to do this is through a controller.

Other directives can have this controller passed to them with the require property syntax. The full form of require looks like:

require: '^?directiveName'

Explanations of the require string:

directiveName: This camel-cased name specifies which directive the controller should come from. So if our directive needs to find a controller on its parent , we’d write it as myMenu.
^ By default, Angular gets the controller from the named directive on the same element. Adding this optional ^ symbol says to also walk up the DOM tree to find the directive. For the example, we’d need to add this symbol; the final string would be \^myMenu.
? If the required controller is not found, Angular will throw an exception to tell you about the problem. Adding a ? symbol to the string says that this controller is optional and that an exception shouldn’t be thrown if not found. Though it sounds unlikely, if we wanted to let s be used without a container, we could add this for a final require string of ?\^myMenu.

Recommended topics

Hot tags