找不到指令“...”所需的控制器“ngModel”

Posted 2023-02-24

【中文标题】找不到指令“...”所需的控制器“ngModel”

【英文标题】：Controller 'ngModel', required by directive '…', can't be found

【发布时间】：2014-03-15 12:00:46

【问题描述】：

这是怎么回事？

这是我的指令：

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

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

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

这是实际的错误文本：

错误：[$compile:ctreq] 控制器“ngModel”，指令“submitRequired”需要，找不到！ 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) 在compositeLinkFn (http://www.domain.ca/Scripts/angular/angular.js:5550:15) 在 nodeLinkFn (http://www.domain.ca/Scripts/angular/angular.js:6132:24) 在compositeLinkFn (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:6751 nodeLinkFn angular.js:6141 复合链接Fn angular.js:5550 nodeLinkFn angular.js:6132 复合链接Fn angular.js:5550 publicLinkFn angular.js:5458 （匿名函数）angular.js:1299 $get.Scope.$eval angular.js:11634 $get.Scope.$apply angular.js:11734 （匿名函数）angular.js:1297 调用 angular.js:3633 doBootstrap angular.js:1295 引导 angular.js:1309 angularInit angular.js:1258 （匿名函数）angular.js:20210 触发 angular.js:2315 （匿名函数）angular.js:2579 forEach angular.js:300 eventHandler angular.js:2578ar.js:7874

【参考方案1】：

以防万一，上面的<input>sn-p 不包含错字，这就是问题所在：

the-model

我们需要ng-model

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

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

建议。如果我们将多个指令应用于一个元素：

bse 输入 必填

我们应该让它们都使用标准 INPUT 设置。因此，两者都应该需要 ng-model，作为访问传递给输入的模型的一种方式。

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

关于require：

当您有需要相互通信的嵌套指令时， 这是通过控制器来实现的。

其他指令可以通过 require 属性将此控制器传递给它们 句法。 require 的完整形式如下：

require: '^?directiveName'

require 字符串的解释：

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

【讨论】：

如果你使用 require 这意味着：其他指令可以将此控制器传递给它们。因此，属性 require 与其他指令相关，而不与模型相关。我的意思是，如果您要设置require: 'ngModel'，那么 HTML 属性必须包含 ng-model。链接函数，然后将在ctrl 变量中接收该控制器，只是需要

您会说，现在这一切都更有意义了吗？请，如果可以，请阅读此 docs.angularjs.org/guide/directive 指令的角度指南。那里对此进行了解释，请搜索：^myTabs。享受 Angular，这是一个了不起的工具 ;)

这里最大的技巧是 directive 和 controller 在这种特殊情况下是相等的。看，我们可以从另一个指令中得到什么——实际上是另一个指令的控制器。我们无权访问其他指令“定义”......我们确实有权访问控制器。这就是我们在他们之间进行交流的方式。请阅读指令指南 - 它在那里;）

我的意思是，在这种情况下它们是平等的。当我们确实需要 ngModel 时，我们正在谈论 ngModel 指令，但我们将在运行时得到的是 ngModel 控制器……这是 angular 的设计方式

知道了。 require: 'ngModel' 表示ng-model 属性必须存在于标记中。 require 还意味着，在运行时，指令的link 函数将有权访问ngModel 指令的控制器。哇！谢谢！