Angular UI/bootstrap typeahead 显示“错误：无控制器：ngModel”错误

Posted 2023-02-19

【中文标题】Angular UI/bootstrap typeahead 显示“错误：无控制器：ngModel”错误

【英文标题】：Angular UI/bootstrap typeahead showing 'Error: No controller: ngModel' error

【发布时间】：2013-10-09 07:38:00

【问题描述】：

在我的应用程序中，我正在调用一个 http 服务来获取数据，并且我正在使用 angular-ui bootstrap 的 typeahead 指令 (ui-bootstrap-tpls-0.6.0.min.js)。我有一个部分，它有一个提到控制器的表单，它包括一个部分内部 ng-repeat。第二部分有预输入。

主窗体部分：

<form
    id="myform" 
    name="myform"
    onsubmit="javascript: return false"
    enctype="application/json"
    ng-controller="EducationCollegeCtrl">
    // doing other stuff
    ...

    <div ng-if="model.hasData">
        <div ng-repeat="college in model.academicRecords" ng-form="collegeForm">
            <div ng-include="'resources/appc/modules/main/education/components/collegetype.all.html'"></div>
        </div>
    </div>
    // other stuff going on here

collegetype.all.html：

....
        <label for="institution">Institution name:</label>
        <div>
              <input type="text" ng-model="college.organizationName"  typeahead="item.name for item in matchingInstitutions($viewValue)>
        </div>
        ....

EducationCollegeCtrl.js：

angular.module('theApp',['ui.bootstrap']).controller('EducationCollegeCtrl', function ($scope, $http) 
   ...
    $scope.matchingInstitutions = function(partialName) 
        return $http.get('lookup/institutions?name=' + partialName ).then(function(response)
            return response.data.institutions;
        ); 
    ;

   ...

服务被调用，下拉菜单正确显示机构名称。但是在浏览器控制台中，我看到下拉列表中每个条目的以下错误

console.log：

Error: No controller: ngModel
at Error (<anonymous>)
at getControllers (/resources/lib/angular/1.1.5/angular.js:4899:39)
at nodeLinkFn (/resources/lib/angular/1.1.5/angular.js:5040:55)
at compositeLinkFn (/resources/lib/angular/1.1.5/angular.js:4626:37)
at nodeLinkFn (/resources/lib/angular/1.1.5/angular.js:5033:40)
at compositeLinkFn (/resources/lib/angular/1.1.5/angular.js:4626:37)
at publicLinkFn (/resources/lib/angular/1.1.5/angular.js:4531:46)
at ngRepeatAction (/resources/lib/angular/1.1.5/angular.js:15638:33)
at Object.$watchCollectionAction (/resources/lib/angular/1.1.5/angular.js:8867:29)
at Object.applyFunction [as fn] (<anonymous>:778:50) <typeahead-match index="$index" match="match" query="query" template-url="templateUrl" class="ng-isolate-scope ng-scope"> angular.js:6422

我对错误的理解是指令中缺少一个“必需”属性，这就是 angular 所抱怨的，但正如您在部分中看到的那样，我确实定义了 ng-model 属性以及控制器在主要形式部分中指定。我在这里想念什么？

编辑：删除 url 的不相关部分。

【问题讨论】：

你能不能做一个 plunker，这样我们就可以更轻松地检查所有内容？

我也有这个问题……完全莫名其妙。

尝试将名称从 model 更改为其他名称。

【参考方案1】：

ng-include 创建子 $scope，原型继承它的父 $scope。这意味着您的 ng-model="college.organizationName" 不会在父级中引用 college 变量，但会隐藏它。并且您的新 college 变量将没有 organizationName 属性。最简单的方法可能就是不使用ng-include，因为您有ng-repeat 并且已经避免了“不要重复自己”的规则。