无法找到指令“..."所需的控制器“ngModel" [英] 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
        }
    };
});

以下是使用中的指令的示例:

Here is an example of the directive in use:

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

这是实际的错误文本:

错误:[$compile:ctreq] 指令submitRequired"所需的控制器ngModel"无法找到！http://errors.angularjs.org/1.2.2/$compile/ctreq?p0=ngModel&p1=submitRequired在 http://www.domain.ca/Scripts/angular/angular.js:78:12在 getControllers (http://www.domain.ca/Scripts/angular/angular.js:5972:19)在 nodeLinkFn (http://www.domain.ca/Scripts/angular/angular.js:6139:35)在复合链接Fn (http://www.domain.ca/Scripts/angular/angular.js:5550:15)在 nodeLinkFn (http://www.domain.ca/Scripts/angular/angular.js:6132:24)在复合链接Fn (http://www.domain.ca/Scripts/angular/angular.js:5550:15)在 publicLinkFn (http://www.domain.ca/Scripts/angular/angular.js:5458:30)在 http://www.domain.ca/Scripts/angular/angular.js:1299:27在 Scope.$get.Scope.$eval (http://www.domain.ca/Scripts/angular/angular.js:11634:28)在 Scope.$get.Scope.$apply (http://www.domain.ca/Scripts/angular/angular.js:11734:23) angular.js:9159(匿名函数)angular.js:9159$get angular.js:6751nodeLinkFn angular.js:6141CompositeLinkFn angular.js:5550nodeLinkFn angular.js:6132CompositeLinkFn angular.js:5550publicLinkFn angular.js:5458(匿名函数)angular.js:1299$get.Scope.$eval angular.js:11634$get.Scope.$apply angular.js:11734(匿名函数)angular.js:1297调用 angular.js:3633doBootstrap angular.js:1295引导程序 angular.js:1309angularInit angular.js:1258(匿名函数)angular.js:20210触发 angular.js:2315(匿名函数)angular.js:2579forEach angular.js:300eventHandler angular.js:2578ar.js:7874

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) 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

推荐答案

以防万一，上面的 片段不包含拼写错误，这就是问题所在:

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

the-model

我们需要ng-model

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

angular 使用规范化/非规范化的命名约定，最后意味着:ng-model 是如何表达 ngModel 的 html 方式.HTML 不区分大小写...这解决了这个问题

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 设置.因此，两者都应该需要 ng-model，作为如何访问传递给输入的模型的一种方式.

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.

如果模型应该代表不同的设置，这绝对没问题，我们也不必跳过传递 ng-model

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

关于require:

当你有嵌套指令需要相互通信时，这是通过控制器完成的.

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

其他指令可以使用 require 属性将此控制器传递给它们句法.require 的完整形式如下:

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

require: '^?directiveName'

require 字符串的说明:

Explanations of the require string:

• directiveName:这个驼峰式名称指定控制器应该来自哪个指令.所以如果我们的指令需要在其父级上找到一个控制器，我们将其写为 myMenu.
• ^ 默认情况下，Angular 从同一元素上的命名指令中获取控制器.添加此可选^ 符号表示还要沿着 DOM 树向上查找指令.例如，我们需要添加此符号；最后一个字符串是 \^myMenu.
• ? 如果没有找到需要的控制器，Angular 会抛出异常告诉你问题所在.添加一种 ?字符串的符号表示此控制器是可选的，如果不是，则不应抛出异常成立.虽然这听起来不太可能，但如果我们想让 s 不带容器，我们可以将它添加到最终的 ?\^myMenu 字符串中.

• 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.

这篇关于无法找到指令“..."所需的控制器“ngModel"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！