即使指令正在工作，爲什麼要獲得ngModel錯誤

Question

儘管我的指令按照預期工作，但我在控制檯日誌中得到了錯誤。我缺少

Error: [$compile:ctreq] Controller 'ngModel', required by directive 'typeahead', can't be found!

我的指令decleration

<typeahead placeholder="'Search...'"></typeahead> 

內directive.js

angular.module("searchBox",[]).directive('typeahead', function($timeout,$http,ProductService) { 
return { 
restrict: 'AEC', 
scope: { 
    placeholder: '=' 
}, 

link:function(scope,element,attrs){  // link 

    scope.current=0; 
    scope.isCurrent=function(index){ 
    return scope.current==index; 
    }; 
    scope.setCurrent=function(index){ 
    scope.current=index; 
    }; 
    scope.hide = function (index){ // to hide dropdown suggestions when mouse leaves the div 
    scope.watchModel=""; 
    }; 
    scope.$watch('model',function(){ 

     var q ='/search/?q='+scope.model; 
     if(scope.model.length > 3) { 
      scope.watchModel = scope.model; 
      $http.get(q) 
      .success(function (response) { 
       // do something 
      }).error(function (msg) { 
       console.log(msg); 
      }) 
     }else{ 
      scope.items = ""; 
     } 
    },true); 

    element.bind("keydown keypress", function (event) { 
    if(event.which === 13) { 
     scope.searchProduct(scope.model); 
     event.preventDefault(); 
    } 
    }); 
}, 
templateUrl: '../static/views/template/searchTemplate.html', // templateUrl 

controller: function ($scope,$location,$route,SearchQueryService,$controller){ // controller 
    $controller('ProductEventController',{$scope : $scope}); 
    $scope.model = ''; 
    $scope.enteredQty = 1; 

    $scope.searchProduct = function (model){ 
    // do something 
    } 
    } 
} 
}); 

我TemplateUrl

<form action="" class="form-search"> 
<div class="input-group"> 
    <input id="searchText" 
      type="text" class="form-control input-lg" 
      ng-model="model" 
      placeholder="{{placeholder}}" /> 
    <span class="input-group-btn" > 
     <button type="button" ng-click="Search_Products(message)" class="btn btn-primary btn-lg">Search</button> 
    </span> 
</div> 
<div class="menuItem" ng-hide="(!watchModel.length)" ng-mouseleave="hide()" > 

    <div class="searchItem scroll-pane"> 
     <table> 
      <tbody> 
       <div 
        ng-repeat="product in items track by $index" 
        style="cursor:pointer" 
        ng-class="{active123:isCurrent($index)}" 
        ng-mouseenter="setCurrent($index)"> 

        <div class="search-product clearfix"> 
         <a class="search-product-image pull-left" ng-href="#productDetails/{{ product.id }}"> 
          <img src="{{ product.images[0] }}" alt="img"> 
         </a> 
         <a class="search-product-title pull-left" ng-href="#productDetails/{{ product.id }}"> 
          <p>{{ product.brand }}</p> 
          <span>{{ product.title }} ({{ product.selectedSizeMeasureUnit }})</span> 
         </a> 
         <a class="search-product-price pull-left" ng-href="#productDetails/{{ product.id }}"> 
          <p> Rs {{ product.totalPriceForSelectedQtyAndSize }}</p> 
          <span>Saved: Rs {{ product.totalSavedAmount }}</span> 
         </a> 

         <a class="search-product-qty pull-left"> 
          <!--<div>Qty</div> 
          <div> 
           <select ng-model="product.selectedQty" ng-options="value for value in product.selectedQtyOptions" ng-change="onQtyChanged(product, product.selectedQty)"></select> 
          </div>--> 
          Qty:<input class="searchQty" type="text" name="qty" ng-model="enteredQty"> 
         </a> 
         <a class="search-product-size pull-left"> 
          <div ng-show="product.sizeQtyPrice[0].size > 0" >Select a Size</div> 
          <div ng-repeat="sqp in product.sizeQtyPrice" style="display:inline"> 
          <button ng-click="onSizeSelected(product, this.sqp)" ng-model="product.selectedSqp" ng-show="this.sqp.size != -1">{{ sqp.size }}{{ sqp.measureUnit }}</button> 
          </div> 
         </a> 
         <a class="search-product-add btn btn-primary" ng-click="addToCart2(this.product,enteredQty)"> 
          <span class="add2cart"><i class="glyphicon glyphicon-shopping-cart"> </i> ADD TO CART</span> 
         </a> 
        </div> 
       </div> 
      </tbody> 
     </table> 
    </div> 
    <a class="search-all" ng-click="searchProduct(model)">View All Products</a> 

</div> 
<div class="searchItem scroll-pane" ng-show="noResult"> 
    No result found 
</div> 
</form> 

UPDATE：

如果我在預輸入指令添加ng-model="model"，我得到以下錯誤：

Error: input is undefined 
.parse@http://127.0.0.1:8000/static/JS/ui-bootstrap-tpls-0.12.0.js:3519:11 
.link@http://127.0.0.1:8000/static/JS/ui-bootstrap-tpls-0.12.0.js:3574:26 
invokeLinkFn@http://127.0.0.1:8000/static/JS/Angular/angular.js:8746:9 
nodeLinkFn@http://127.0.0.1:8000/static/JS/Angular/angular.js:8246:1 
compileTemplateUrl/<@http://127.0.0.1:8000/static/JS/Angular/angular.js:8476:1 
processQueue@http://127.0.0.1:8000/static/JS/Angular/angular.js:14634:28 
scheduleProcessQueue/<@http://127.0.0.1:8000/static/JS/Angular/angular.js:14650:27 
$RootScopeProvider/this.$get</Scope.prototype.$eval@http://127.0.0.1:8000/static/JS/Angular/angular.js:15878:16 
$RootScopeProvider/this.$get</Scope.prototype.$digest@http://127.0.0.1:8000/static/JS/Angular/angular.js:15689:15 
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://127.0.0.1:8000/static/JS/Angular/angular.js:15986:13 
done@http://127.0.0.1:8000/static/JS/Angular/angular.js:10511:36 
completeRequest@http://127.0.0.1:8000/static/JS/Angular/angular.js:10683:7 
requestLoaded@http://127.0.0.1:8000/static/JS/Angular/angular.js:10624:1 
<typeahead class="ng-pristine ng-untouched ng-valid ng-isolate-scope" placeholder="'Search...'" ng-model="model "> 

Answer 1

你需要指定預輸入元件上的模型。

<typeahead placeholder="'Search...'" on-enter ="searchProduct()"></typeahead> 

將成爲

<typeahead placeholder="'Search...'" on-enter="searchProduct()" ng-model="model"></typeahead> 

和你searchProduct()方法變得

$scope.searchProduct = function() { 
var model = $scope.model; 

// do something 
}