Angular UI / bootstrap typeahead显示'错误:无控制器:ngModel'错误

时间:2013-10-02 19:18:32

标签: javascript angularjs angularjs-directive angular-ui-bootstrap

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

主要形式部分:

<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

我对错误的理解是缺少指令中的'required'属性,这就是angular抱怨的内容,但正如你在partial中看到的那样,我确实定义了ng-model属性,并且控制器在主窗体中指定partial。我在这里失踪了什么?

编辑:删除了网址的无关部分。

1 个答案:

答案 0 :(得分:0)

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