AngularMaterial自動完成加載動畫不會停止

Question

背景：

我正在學習AngularJS並使用AngularMaterial。

為了測試它，我決定根據文檔中提供的代碼創建一個示例（請檢查codepen）。 我的應用程序是Cloud9中的nodeJS應用程序，非常簡單。

碼：

它分為3個主要文件： index.html （包含自動完成框）， server.js （包含服務器邏輯）和autocomplete.js （客戶端邏輯）。

以下是index.html文件，然后是autocomplete.js文件。 因為我的服務器在Cloud9中運行，並且此示例已鏈接到該示例，所以您可以檢查運行live的小示例！

 /*global angular*/ 'use strict'; angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache']).controller('DemoCtrl', DemoCtrl); function DemoCtrl($q, $log, $http) { this.searchText = null; this.querySearch =function(query) { let serverUrl = '//material-complete-fl4m3ph03n1x.c9users.io/getStates'; let deferred = $q.defer(); $http({ method: 'GET', url: serverUrl, params: { word: query } }).then(function successCallback(response) { deferred.resolve(response.data); }, function errorCallback(response) { $log.error(response); }); return deferred.promise; }; this.searchTextChange = function(text) { $log.info('Text changed to ' + text); }; this.selectedItemChange = function(item) { $log.info('Item changed to ' + JSON.stringify(item)); }; }

 <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body ng-app="MyApp" ng-cloak> <div ng-controller="DemoCtrl as ctrl" layout="column" ng-cloak="" class="autocompletedemoBasicUsage" ng-app="MyApp"> <md-content class="md-padding"> <form ng-submit="$event.preventDefault()"> <md-autocomplete 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="What is your favorite 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. </md-not-found> </md-autocomplete> <br> </form> </md-content> </div> <!--CSS files--> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc4/angular-material.min.css"> <link rel="stylesheet" href="https://material.angularjs.org/1.1.0-rc4/docs.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"> <!-- Angular Material requires Angular.js Libraries --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-messages.min.js"></script> <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc4/angular-material.min.js"></script> <!-- Your application bootstrap --> <script type="text/javascript" src="js/autocomplete.js"></script> </body> </html>

另外，這是我的server.js文件的代碼，該文件使用NodeJ和ExpressJ：

//Lets define a port we want to listen to
const PORT = 8080;

//Init Vars
var express = require('express');
var app = express();

//Init Functions
//we allow CORS: http://enable-cors.org/server_expressjs.html
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

app.listen(PORT, function() {
  console.log('Example app listening on port ' + PORT + '!');
});

//GET methods
app.get('/getStates', function(req, res, next) {

  var createFilterFor = function(query) {
    var lowercaseQuery = query.toLowerCase();

    return function filterFn(state) {
      return (state.value.indexOf(lowercaseQuery) > -1);
    };

  };

  //get parameters from GET: https://scotch.io/tutorials/use-expressjs-to-get-url-and-post-parameters
  var query = req.param('word');

  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';

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

  var result = query ? statesMap.filter(createFilterFor(query)) : statesMap;
  res.send(result);
});

什么有效：

現在，如果您四處游玩，可以在列表中選擇一個美國州。 該列表根據您鍵入的內容進行過濾，並允許您選擇某些內容。 如果使用開發人員工具，您還可以在控制台中看到日志，這進一步表明查詢正在運行，選擇也是如此。

什么不是：

這里的問題是當您清除文本框時。 如果選擇一個狀態，然后清除狀態（按叉號或按Escape鍵），則輸入框下方會顯示一個藍色條：

blue_bar_under_box

這表明查詢正在完成。 問題是我看不到任何發送到服務器的請求，並且卡在了無限查詢中！ 即使顯然我沒有這樣做！

我在這里想念什么？ 有人能幫我嗎？

額外

對於那些感興趣的人，這里是示例的GitHub存儲庫！

https://github.com/Fl4m3Ph03n1x/material-complete

感謝所有幫助！

Answer 1

將md-min-length為1您真的不希望在用戶開始鍵入之前建議從外部服務完成輸入。

<md-autocomplete 
  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="1"
  placeholder="What is your favorite 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.
  </md-not-found>
</md-autocomplete>

Answer 2

您從錯誤的位置返回了諾言，並且未正確返回鏈，因此無法正確解決。

試試這個（注意在調用$ http之前的返回）：

this.querySearch =function(query) {
    let serverUrl = '//material-complete-fl4m3ph03n1x.c9users.io/getStates';
    let deferred = $q.defer();
    return $http({
        method: 'GET',
        url: serverUrl,
        params: {
            word: query
        }

    }).then(function successCallback(response) {
        if(response.data.length>0) {
            deferred.resolve(response.data); }
        else {
            var nada=[]
            deferred.resolve(nada); }
        }
        return deferred.promise;
    }, function errorCallback(response) {
        $log.error(response);
        deferred.reject(response);
        return deferred.promise;
    });


};

注釋中的TLDR版本。 這是一個已知的錯誤，在撰寫本文時尚未發布此修復程序。 解決方法是回滾到AM 1.06或使用CSS隱藏進度條。 CSS：

md-autocomplete md-progress-linear { display: none; }

AngularMaterial自動完成加載動畫不會停止

問題描述

背景：

碼：

什么有效：

什么不是：

額外

2 個解決方案

解決方案1
1 2016-06-03 08:23:19

解決方案2
1 已采納 2016-06-08 20:26:31

AngularMaterial自動完成加載動畫不會停止

問題描述

背景：

碼：

什么有效：

什么不是：

額外

2 個解決方案

解決方案1 1 2016-06-03 08:23:19

解決方案2 1 已采納 2016-06-08 20:26:31

解決方案1
1 2016-06-03 08:23:19

解決方案2
1 已采納 2016-06-08 20:26:31