无法找到指令'...'所需的控制器'ngModel'

Question

这里发生了什么？

这是我的指令:

// 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]无法找到指令'submitRequired'所需的控制器'ngModel'! 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)在compositeLinkFn(http://www.domain.ca/Scripts/angular/angular.js:6139:35)的compositeLinkFn(http) ://www.domain.ca/Scripts/angular/angular.js:5550:15)在compositeLinkFn(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 compositeLinkFn angular.js:5550 nodeLinkFn angular.js:6132 compositeL inkFn 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 bootstrap 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

Answer 1

为了以防万一,上面的<input>代码片段不包含拼写错误,这就是问题所在:

the-model

我们需要 ng-model

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

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

建议.如果我们正在处理应用于一个元素的多个指令:

• BSE-输入
• 提交要求的

我们应该让它们都使用标准的 INPUT设置.因此,两者都应该需要ng-model,作为如何访问传递给输入的模型的方法.

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

关于require:

当您具有需要相互通信的嵌套指令时,执行此操作的方法是通过控制器.

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

require: '^?directiveName'

需求字符串的说明:

• directiveName:这个以驼峰为基础的名称指定控制器应该来自哪个指令.因此,如果我们的指令需要在其父节点上找到控制器,我们将其写为myMenu.
• ^默认情况下,Angular从同一元素上的named指令获取控制器.添加此可选^符号表示也可以沿DOM树查找指令.例如,我们需要添加此符号; 最后一个字符串是\ ^ myMenu.
• ?如果找不到所需的控制器,Angular将抛出异常来告诉您该问题.添加一个？字符串的符号表示此控制器是可选的,如果未找到则不应抛出异常.虽然听起来不太可能,但如果我们想让s在没有容器的情况下使用,我们可以将它添加到最终需要的字符串？\ ^ myMenu中.