Question

我试图使用角度材质的自动完成指令。我试图从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)

对不起，我不能提供一个傻瓜，但这是生产代码。

对我出错的地方有任何建议吗？

Answer 1

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

ng-controller="DemoCtrl as ctrl"

在你的情况下

ng-controller="helpListCtrl as ctrl"

Answer 2

querySearch应该返回一个承诺。

所以，像

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

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

角度材质自动完成功能无法正常工作

3 个答案: