Angular Material自动完成功能不起作用答案

【问题标题】：Angular Material autocomplete not workingAngular Material自动完成功能不起作用
【发布时间】：2015-08-22 22:30:54
【问题描述】：

我正在尝试使用角度材料中的自动完成指令。我试图从their website实现示例

但只要我开始输入，我就会收到TypeError: Cannot read property 'success' of undefined

角度代码：

var spApp = angular.module('helpApp', ['ui.bootstrap', 'angular-edit-row', 'ui-notification', 'uiSwitch', 'ngMaterial'])

 spApp.controller('helpListCtrl', function($scope, $http, $modal, Notification) {
  function DemoCtrl ($timeout, $q) {
var self = this;

// list of `state` value/display objects
self.states        = loadAll();
self.selectedItem  = null;
self.searchText    = null;
self.querySearch   = querySearch;

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

/**
 * Search for states... use $timeout to simulate
 * remote dataservice call.
 */
function querySearch (query) {
  var results = query ? self.states.filter( createFilterFor(query) ) : [];
  return results;
}

/**
 * Build `states` list of key/value pairs
 */
function loadAll() {
  var allStates = 'North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,Wisconsin, Wyoming';

  return allStates.split(/, +/g).map( function (state) {
    return {
      value: state.toLowerCase(),
      display: state
    };
  });
}

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

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

}
}

<md-autocomplete flex="" required="" md-input-name="autocompleteField" md-no-cache="ctrl.noCache" md-selected-item="ctrl.selectedItem" md-search-text="ctrl.searchText" md-items="item in ctrl.querySearch(ctrl.searchText)" md-item-text="item.display" md-floating-label="Favorite state">

HTML 内的代码：

<md-item-template>
            <span md-highlight-text="ctrl.searchText">{{item.display}}</span>
          </md-item-template>
          <div ng-messages="searchForm.autocompleteField.$error" ng-if="searchForm.autocompleteField.$touched">
            <div ng-message="required">You <b>must</b> have a favorite state.</div>
            <div ng-message="minlength">Your entry is not long enough.</div>
            <div ng-message="maxlength">Your entry is too long.</div>
          </div>
</md-autocomplete>

编辑： 控制台输出：

TypeError: Cannot read property 'success' of undefined
at L (angular-material.min.js:10)
at F (angular-material.min.js:10)
at Object.C [as fn] (angular-material.min.js:10)
at n.$get.n.$digest (angular.js:14308)
at n.$get.n.$apply (angular.js:14571)
at eg.$$debounceViewValueCommit (angular.js:23391)
at eg.$setViewValue (angular.js:23363)
at HTMLInputElement.l (angular.js:19784)
at HTMLInputElement.b.event.dispatch (jquery-1.9.1.js:973)
at HTMLInputElement.b.event.add.v.handle (jquery-1.9.1.js:913)

很抱歉，我无法提供 plunkr，但这是生产代码。

对我哪里出错有什么建议吗？

【问题讨论】：

您的任何代码中都没有success。您能否尝试查明错误（应该位于控制台中该行的右侧），并尝试显示success 所在的代码块。如果您可以在那里重现该问题，jsfiddle 也会有很大帮助。
我已将控制台输出添加到原始帖子中。它指向 angular.js。我在同一个控制器中使用succes，但在自动完成功能之外。代码位于 Sharepoint 中，因此我无法真正复制这种情况。

标签： javascript angularjs angularjs-directive autocomplete

【解决方案1】：

querySearch 应该返回一个承诺。

所以，像

function querySearch(query){
  var d = $q.defer();
  var results = query ? self.states.filter( createFilterFor(query) ) : [];
  d.resolve(results)
  return d.promise;
}

【讨论】：

【解决方案2】：

检查您的控制器是否使用别名定义，就像原始示例一样：

ng-controller="DemoCtrl as ctrl"

在你的情况下

ng-controller="helpListCtrl as ctrl"

【讨论】：

【解决方案3】：

试试这个例子

<html lang="en">
<head>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
    <script language="javascript">
        angular
           .module('firstApplication', ['ngMaterial'])
           .controller('autoCompleteController', autoCompleteController);

        function autoCompleteController ($timeout, $q, $log) {
           var self = this;
           self.simulateQuery = false;
           self.isDisabled    = false;
           // list of states to be displayed
           self.states        = loadStates();
           self.querySearch   = querySearch;
           self.selectedItemChange = selectedItemChange;
           self.searchTextChange   = searchTextChange;
           self.newState = newState;
           function newState(state) {
              alert("This functionality is yet to be implemented!");
           }
           function querySearch (query) {
              var results = query ? self.states.filter( createFilterFor(query) ) : self.states, 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 list of states as map of key-value pairs
           function loadStates() {
              var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
                 Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
                 Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
                 Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
                 North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
                 South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
                 Wisconsin, Wyoming';
              return allStates.split(/, +/g).map( function (state) {
                 return {
                    value: state.toLowerCase(),
                    display: state
                 };
              });
           }
           //filter function for search query
           function createFilterFor(query) {
              var lowercaseQuery = angular.lowercase(query);
              return function filterFn(state) {
                 return (state.value.indexOf(lowercaseQuery) === 0);
              };
           }
        }
    </script>
</head>
<body ng-app="firstApplication" ng-cloak>
    <div ng-controller="autoCompleteController as ctrl" layout="column" ng-cloak>
        <md-content class="md-padding">
            <form ng-submit="$event.preventDefault()">
                <p><code>md-autocomplete</code> can be used to provide search results from local or remote data sources.</p>
                <md-autocomplete ng-disabled="ctrl.isDisabled"
                                 md-no-cache="ctrl.noCache"
                                 md-selected-item="ctrl.selectedItem"
                                 md-search-text-change="ctrl.searchTextChange(ctrl.searchText)"
                                 md-search-text="ctrl.searchText"
                                 md-selected-item-change="ctrl.selectedItemChange(item)"
                                 md-items="item in ctrl.querySearch(ctrl.searchText)"
                                 md-item-text="item.display"
                                 md-min-length="0"
                                 placeholder="US State?">
                    <md-item-template>
                        <span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.display}}</span>
                    </md-item-template>
                    <md-not-found>
                        No states matching "{{ctrl.searchText}}" were found.
                        <a ng-click="ctrl.newState(ctrl.searchText)">Create a new one!</a>
                    </md-not-found>
                </md-autocomplete>
                <br />
                <md-checkbox ng-model="ctrl.simulateQuery">Show progress for results?</md-checkbox>
                <md-checkbox ng-model="ctrl.noCache">Disable caching?</md-checkbox>
                <md-checkbox ng-model="ctrl.isDisabled">Disable?</md-checkbox>
                <p><code>md-autocomplete</code> caches results when performing a query.  After first call, it uses the cached results to eliminate unnecessary server requests or lookup logic and it can be disabled.</p>
            </form>
        </md-content>
    </div>
</body>
</html>

【讨论】：