Question

我在控制台日志中遇到错误，尽管我的指令正在按预期工作。我缺少什么

错误：[$ compile：ctreq]无法找到指令＆＃39; typeahead＆＃39;所需的控制器＆＃39; ngModel＆＃39;，

My Directive decleration

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

Inside 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>

更新：

如果我在typeahead指令中添加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元素上指定模型。

<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
}

为什么即使指令工作也要使ngModel出错

1 个答案: