ディレクティブ '…'で必要なコントローラ 'ngModel'が見つかりません


88

何が起きてる?

これが私の指示です:

app.directive('submitRequired', function (objSvc) {
    return {
        require: 'ngModel',
        link: function (scope, elm, attrs, ctrl) {

          // do something
        }
    };
});

次に、使用中のディレクティブの例を示します。

<input submit-required="true"></input>

実際のエラーテキストは次のとおりです。

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) <input submit-required="true"> 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

回答:


126

ここで説明するように:Angular NgModelController<input必要なコントローラをに提供する必要がありますngModel

<input submit-required="true" ng-model="user.Name"></input>

1
完璧です。ありがたいです!これを回答としてマークします。フォローアップの質問があります。別の質問を投稿するか、元の質問を変更する必要がありますか?
Shaun Luttin

これがフォローアップです: stackoverflow.com/questions/21807929/...は
ショーンLuttin

2
誤って入力ng-modelsしてこのエラーが発生しました。
みじん切り

@Radim Kohlerあなたの回答が実際に困っている人を助けてくれて嬉しいです、私自身もこれを達成するのに近いです。上記の入力ステートメントから、 "ng-model"属性には、 "{{RootObjectName +"。 "+ ModelName}}"のような文字列連結を使用できますか?? !! $ scopeのモデルは単純ではなく、DBからの入力に基づいてコントローラーで動的に作成されるため
pavan kumar

@pavankumarこのリンクをチェックしてくださいnext.plnkr.co/edit/…これng-model="RootObject[alias]"は、セッションに `$ scope.RootObject = {};がある場合に機能します。別名の$ scope.alias =「姓」 `... instaead、でもforEachのは、ダイナミック名を提供することができます
Radimケーラー

8

この問題の1つの可能な解決策ng-modelは、そのディレクティブを使用するために属性が必要になることです。

したがって、「ng-model」属性を追加すると、問題を解決できます。

<input submit-required="true" ng-model="user.Name"></input>

これは私のものを解決しました。ありがとう。ng-changeをトリガーするには、要素へのng-modelバインドが必要であるという点を逃したと思います。
antonD

1

行を削除することもできます

  require: 'ngModel',

ngModelこのディレクティブで必要ない場合。削除ngModelすると、そのngModelエラーなしでディレクティブを作成できます。


0

私は同じエラーに直面しました、私の場合、「ng-moel」のようなスペルミスのng-modelディレクティブのスペルを間違えました

間違ったもの: ng-moel = "user.name" 正しいもの: ng-model = "user.name"

ここに画像の説明を入力してください

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.