Угловой автозаполнение не работает

Question

От tutorial. Строка поиска оформлена правильно.

Но когда я печатаю выпадающий не появляется со статическими данными в моем контроллере.

Это мой шаблон.

<div class="container-fluid"> 

<div class="row"> 
    <div class="col-sm-12 col-md-4 col-lg-3"> 

    <div class="panel panel-default panel-filter"> 
     <div class="panel-heading"> 
     <h3 class="panel-title">Calendar Filter</h3> 
     </div> 
     <div class="panel-body"> 

     <div class="section section-filter"> 

     <form ng-submit="$event.preventDefault()"> 
      <div class="form-group" style="margin-bottom:0"> 
      <div class="input-group input-group-sm addon-left"> 
      <span class="input-group-addon">View By</span> 
      <select class="form-control" name="select_view" id="select_view"> 

       <option value="taskown">Task Owner</option> 
       <option value="taskacc">Task Account</option> 
      </select> 
      </div> 
      </div> 

      <div class="form-group-taskown"> 
      <div class="space15"></div> 
      <div class="form-group"> 
       <div class="input-group input-group-sm addon-left"> 
       <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span> 
<div class="autocompletedemoCustomTemplate"> 
<md-autocomplete 
      ng-disabled="taskCalendarCtrl.isDisabled" 
      md-no-cache="taskCalendarCtrl.noCache" 
      md-selected-item="taskCalendarCtrl.selectedItem" 
      md-search-text-change="taskCalendarCtrl.searchTextChange(taskCalendarCtrl.searchText)" 
      md-search-text="taskCalendarCtrl.searchText" 
      md-selected-item-change="taskCalendarCtrl.selectedItemChange(item)" 
      md-items="item in taskCalendarCtrl.querySearch(taskCalendarCtrl.searchText)" 
      md-item-text="item.name" 
      md-min-length="0" 
      placeholder="" 
      md-menu-class="autocomplete-custom-template"> 
     <md-item-template> 
      <span class="item-title"> 
      <md-icon md-svg-icon="img/icons/octicon-repo.svg"></md-icon> 
      <span> {{item.name}} </span> 
      </span> 
      <span class="item-metadata"> 
      <span class="item-metastat"> 
       <strong>{{item.watchers}}</strong> watchers 
      </span> 
      <span class="item-metastat"> 
       <strong>{{item.forks}}</strong> forks 
      </span> 
      </span> 
     </md-item-template> 
     </md-autocomplete> 
    </div> 




       <!-- 
       <input type="text" class="form-control" id="searchBox" name="typeahead_example_1" ng-model="searchBox" ng-change="change(text)" auto-complete ui-items="users">--> 
       </div> 
      </div> 
      </div> 

     </form> 

     </div><!--/section--> 

     </div> 
    </div> 

    </div> 

    <div class="col-sm-12 col-md-8 col-lg-6"> 
    <div class="section section-calendar"> 
     <div id='calendar'></div> 
    </div><!--/section--> 
    </div> 

    <div class="space20 hidden-lg"></div> 
    <div class="col-sm-12 col-sm-offset-0 col-md-8 col-md-offset-4 col-lg-3 col-lg-offset-0"> 
    <div class="panel panel-default panel-tasks"> 
     <div class="panel-heading"> 
     <h3 class="panel-title">Tasks</h3> 
     </div> 
     <div class="list-group" ng-repeat="task in taskList | limitTo: 5"> 
     <a href="{{task.url}}" class="list-group-item"> 
      <span class="badge">{{task.status}}</span> 
      <h4 class="list-group-item-heading">{{task.heading}}</h4> 
      <ul class="list-unstyled"> 
      <li><strong>Assigned To:</strong>{{task.assignedTo}}</li> 
      <li><strong>Releted To:</strong>{{task.relatedTo}}</li> 
      </ul> 
     </a> 
     </div><!--/list-group--> 
    </div> 
    </div> 
</div><!--/row--> 

</div> <!-- /container --> 

и контроллер ака taskCalendarCtrl

'use strict'; 
angular 

.module('taskCalendar') 


    .controller('taskCalendarCtrl', ['$scope', 'task', 'user', 'account', function($scope, task , user, account) { 
    }], taskCalendarCtrl); 

    function taskCalendarCtrl ($timeout, $q, $log) { 
    var self = this; 

    self.simulateQuery = false; 
    self.isDisabled = false; 

    self.repos   = loadAll(); 
    self.querySearch = querySearch; 
    self.selectedItemChange = selectedItemChange; 
    self.searchTextChange = searchTextChange; 

    // ****************************** 
    // Internal methods 
    // ****************************** 

    /** 
    * Search for repos... use $timeout to simulate 
    * remote dataservice call. 
    */ 
    function querySearch (query) { 
     var results = query ? self.repos.filter(createFilterFor(query)) : self.repos, 
      deferred; 
     if (self.simulateQuery) { 
     deferred = $q.defer(); 
     $timeout(function() { deferred.resolve(results); }, Math.random() * 1000, false); 
     return deferred.promise; 
     } else { 
     return results; 
     } 
    } 

    function searchTextChange(text) { 
     $log.info('Text changed to ' + text); 
    } 

    function selectedItemChange(item) { 
     $log.info('Item changed to ' + JSON.stringify(item)); 
    } 

    /** 
    * Build `components` list of key/value pairs 
    */ 
    function loadAll() { 
     var repos = [ 
     { 
      'name'  : 'Angular 1', 
      'url'  : 'https://github.com/angular/angular.js', 
      'watchers' : '3,623', 
      'forks'  : '16,175', 
     }, 
     { 
      'name'  : 'Angular 2', 
      'url'  : 'https://github.com/angular/angular', 
      'watchers' : '469', 
      'forks'  : '760', 
     }, 
     { 
      'name'  : 'Angular Material', 
      'url'  : 'https://github.com/angular/material', 
      'watchers' : '727', 
      'forks'  : '1,241', 
     }, 
     { 
      'name'  : 'Bower Material', 
      'url'  : 'https://github.com/angular/bower-material', 
      'watchers' : '42', 
      'forks'  : '84', 
     }, 
     { 
      'name'  : 'Material Start', 
      'url'  : 'https://github.com/angular/material-start', 
      'watchers' : '81', 
      'forks'  : '303', 
     } 
     ]; 
     return repos.map(function (repo) { 
     repo.value = repo.name.toLowerCase(); 
     return repo; 
     }); 
    } 

    /** 
    * Create filter function for a query string 
    */ 
    function createFilterFor(query) { 
     var lowercaseQuery = angular.lowercase(query); 

     return function filterFn(item) { 
     return (item.value.indexOf(lowercaseQuery) === 0); 
     }; 

    } 
    } 

я получаю эти ошибки, когда я нажимаю и введите в поле поиска

подробнее о моей ошибке

Answer 1

У вас есть объявление контроллера неправильно в вашем коде.

Неправильный синтаксис инъекции зависимостей контроллера.

должно быть,

.controller('taskCalendarCtrl', ['$scope', 'task', 'user', 
    'account','$timeout','$q','$log', function($scope, task , user, 
    account,$timeout,$q,$log) { 
}]) 

Вот изменение полного файла.

'use strict'; 
angular 

.module('taskCalendar') 
.controller('taskCalendarCtrl', ['$scope', 'task', 'user', 'account','$timeout','$q','$log', function($scope, task , user, account,$timeout,$q,$log) { 


var self = this; 

self.simulateQuery = false; 
self.isDisabled = false; 

self.repos   = loadAll(); 
self.querySearch = querySearch; 
self.selectedItemChange = selectedItemChange; 
self.searchTextChange = searchTextChange; 

// ****************************** 
// Internal methods 
// ****************************** 

/** 
* Search for repos... use $timeout to simulate 
* remote dataservice call. 
*/ 
function querySearch (query) { 
    var results = query ? self.repos.filter(createFilterFor(query)) : self.repos, 
     deferred; 
    if (self.simulateQuery) { 
    deferred = $q.defer(); 
    $timeout(function() { deferred.resolve(results); }, Math.random() * 1000, false); 
    return deferred.promise; 
    } else { 
    return results; 
    } 
} 

function searchTextChange(text) { 
    $log.info('Text changed to ' + text); 
} 

function selectedItemChange(item) { 
    $log.info('Item changed to ' + JSON.stringify(item)); 
} 

/** 
* Build `components` list of key/value pairs 
*/ 
function loadAll() { 
    var repos = [ 
    { 
     'name'  : 'Angular 1', 
     'url'  : 'https://github.com/angular/angular.js', 
     'watchers' : '3,623', 
     'forks'  : '16,175', 
    }, 
    { 
     'name'  : 'Angular 2', 
     'url'  : 'https://github.com/angular/angular', 
     'watchers' : '469', 
     'forks'  : '760', 
    }, 
    { 
     'name'  : 'Angular Material', 
     'url'  : 'https://github.com/angular/material', 
     'watchers' : '727', 
     'forks'  : '1,241', 
    }, 
    { 
     'name'  : 'Bower Material', 
     'url'  : 'https://github.com/angular/bower-material', 
     'watchers' : '42', 
     'forks'  : '84', 
    }, 
    { 
     'name'  : 'Material Start', 
     'url'  : 'https://github.com/angular/material-start', 
     'watchers' : '81', 
     'forks'  : '303', 
    } 
    ]; 
    return repos.map(function (repo) { 
    repo.value = repo.name.toLowerCase(); 
    return repo; 
    }); 
} 

/** 
* Create filter function for a query string 
*/ 
function createFilterFor(query) { 
    var lowercaseQuery = angular.lowercase(query); 

    return function filterFn(item) { 
    return (item.value.indexOf(lowercaseQuery) === 0); 
    }; 

} 

} 

]) 

Answer 2

проверьте, установлена ​​ли директива ng-controller. Если нет, тогда установите его первым.

например:

<div class="container-fluid" ng-controller="taskCalendarCtrl as taskCalendarCtrl"> 

Следующее изменение

.controller('taskCalendarCtrl', ['$scope', 'task', 'user', 'account', function($scope, task , user, account) { 
    }], taskCalendarCtrl); 

в

.controller('taskCalendarCtrl', taskCalendarCtrl);