Question

我在AngularJS中构建了一个简单的搜索表单，但是得到了一个未定义的错误。

列表控制器的代码如下：

var phonecatControllers = angular.module('phonecatControllers', []);

phonecatControllers.controller('PhoneListCtrl', ['$scope', 'Phone',
  function($scope, Phone) {
    $scope.phones = Phone.query();
    $scope.orderProp = 'age';
  }]);

搜索控制器为：

phonecatControllers.controller('SearchCtrl', ['$scope', 'Phone', 
    function ($scope, $http) {
        $scope.url = 'phones.json';
        // The function that will be executed on button click (ng-click="search()")
        $scope.search = function() {

            // Create the http post request
            // the data holds the keywords
            // The request is a JSON request.
            $http.post($scope.url, { "data" : $scope.keywords})
            .success(function(data, status) {
                $scope.status = status;
                $scope.data = data;
                $scope.result = data; // Result
            })
            .error(function(data, status) {
                $scope.data = data || "Request failed";
                $scope.status = status;         
            });
        }
    }]);

对于搜索表单，HTML看起来像这样：

<div ng-controller="SearchCtrl">
    <form class="well form-search">
        <label>Search:</label>
        <input type="text" ng-model="keywords" class="input-medium search-query" placeholder="Keywords...">
        <button type="submit" class="btn" ng-click="search()">Search</button>
    </form>
    <div ng-model="result">
    {{result}}
    </div>
</div>

未定义的错误不是此行的函数：$http.post($scope.url, { "data" : $scope.keywords})。

有人能指出我正确的方向吗？

它也没有在URL上执行查询字符串，因此它不会成为历史堆栈的一部分。

该服务如下：

phonecatServices.factory('Phone', ['$resource',
  function($resource){
    return $resource('phones/:phoneId.json', {}, {
      query: {method:'GET', params:{phoneId:'phones'}, isArray:true}
    });
  }]);

所以简而言之......为什么我得到未定义的错误？为什么不传递查询字符串？

Answer 1

错误就在这一行 -

phonecatControllers.controller('SearchCtrl', ['$scope', 'Phone',

应该是

phonecatControllers.controller('SearchCtrl', ['$scope', '$http',

您应该通过$http，而不是phone

Answer 2

您需要在控制器中使用之前初始化关键字：

phonecatControllers.controller('SearchCtrl', ['$scope', 'Phone', 
   function ($scope, $http) {
    $scope.url = 'phones.json';
    $scope.keywords = '';
    // The function that will be executed on button click (ng-click="search()")
    $scope.search = function() {

        // Create the http post request
        // the data holds the keywords
        // The request is a JSON request.
        $http.post($scope.url, { "data" : $scope.keywords})
        .success(function(data, status) {
            $scope.status = status;
            $scope.data = data;
            $scope.result = data; // Result
        })
        .error(function(data, status) {
            $scope.data = data || "Request failed";
            $scope.status = status;         
        });
    }
}]);

或使用ng-init的HTML

<div ng-controller="SearchCtrl">
    <form class="well form-search" ng-init="keywords:''">
        <label>Search:</label>
        <input type="text" ng-model="keywords" class="input-medium search-query" placeholder="Keywords...">
        <button type="submit" class="btn" ng-click="search()">Search</button>
    </form>
    <div ng-model="result">
    {{result}}
    </div>
</div>

根据新问题，这里是更新：

您需要从数据中删除双引号，然后传递如下数据：

 $http.get($scope.url, { data : $scope.keywords})
        .success(function(data, status) {
            $scope.status = status;
            $scope.data = data;
            $scope.result = data; // Result
 })

通过RESTful方法传递

 $http.get($scope.url+'/'+$scope.keywords)
        .success(function(data, status) {
            $scope.status = status;
            $scope.data = data;
            $scope.result = data; // Result
 })

Answer 3

要传递我已完成的查询字符串：

phonecatControllers.controller('SearchCtrl', ['$scope', '$http', '$location', 
    function ($scope, $http, $location) {
        $scope.keywords = $location.search()['q'];
        $scope.search = function() {
            $location.path('/phones').search('q', $scope.keywords);     
            });

        }
    }]);

AngularJS搜索表单引发未定义的错误

3 个答案: