2013-05-23 32 views
28

Tôi đang cố gắng để lấy angular.js và tìm cách tìm ra một số điều ít tài liệu hơn một chút.

Hãy xem xét điều này - Tôi có phương pháp tìm kiếm trên máy chủ chấp nhận thông số truy vấn và trả về tập hợp kết quả tìm kiếm và trả lời GET /search.json tuyến đường (Rails FWIW).

Vì vậy, với jQuery, một truy vấn mẫu sẽ trông như thế này:

$.getJSON('/search', { q: "javascript", limit: 10 }, function(resp) { 
    // resp is an array of objects: [ { ... }, { ... }, ... ] 
}); 

Tôi đang cố gắng thực hiện điều này bằng góc, và quấn quanh đầu tôi như thế nào nó hoạt động. Đây là những gì tôi có bây giờ:

var app = angular.module('searchApp', ['ngResource']); 

app.controller('SearchController', ['$scope', '$resource', function($scope, $resource){ 

    $scope.search = function() { 
    var Search = $resource('/search.json'); 
    Search.query({ q: "javascript", limit: 10 }, function(resp){ 
     // I expected resp be the same as before, i.e 
     // an array of Resource objects: [ { ... }, { ... }, ... ] 
    }); 
    } 
}]); 

Và trong giao diện:

<body ng-app="searchApp"> 
    ... 
    <div ng-controller="SearchController"> 
    ... 
    <form ng-submit="search()">...</form> 
    ... 
    </div> 
</body> 

Tuy nhiên, tôi cứ bị lỗi như TypeError: Object #<Resource> has no method 'push'$apply already in progress.

Mọi thứ dường như làm việc ra như mong đợi nếu tôi thay đổi $resource khởi như sau:

var Search = $resource("/search.json?" + $.param({ q: "javascript", limit: 10 })); 
Search.query(function(resp){ ... }); 

Dường như trực quan hơn để khởi tạo $resource một lần và sau đó vượt qua tham số truy vấn khác nhau với những thay đổi trong việc tìm kiếm yêu cầu. Tôi tự hỏi nếu tôi đang làm sai (rất có thể) hoặc chỉ hiểu lầm các tài liệu gọi $resource.query với các đối tượng params truy vấn như là đối số đầu tiên là khả thi. cảm ơn.

Trả lời

24

TypeError: Object # has no method 'push' and $apply already in progress

vì bạn chưa xác định tài nguyên có tên Tìm kiếm. Trước tiên, bạn cần định nghĩa một tài nguyên như vậy. Doc: $resource. Dưới đây là một ví dụ thực hiện

angular.module('MyService', ['ngResource']) 
     .factory('MyResource', ['$resource', function($resource){ 

    var MyResource = $resource('/api/:action/:query',{ 
     query:'@query' 
    }, { 
     search: { 
      method: 'GET', 
      params: { 
       action: "search", 
       query: '@query' 
      } 
     } 
    }); 
    return MyResource; 
}]); 

Bao gồm module này trong bạn ứng dụng và sử dụng nó trong một bộ điều khiển như thế này

$scope.search_results = MyResource.search({ 
    query: 'foobar' 
}, function(result){}); 

Tuy nhiên tôi không chắc chắn nếu điều này là những gì bạn cần. Dịch vụ tài nguyên tương tác với các nguồn dữ liệu RESTful phía máy chủ, còn gọi là REST API.

Có lẽ bạn cần chỉ là một http đơn giản nhận được:

$http({method: 'GET', url: '/someUrl'}). 
    success(function(data, status, headers, config) { 
    // this callback will be called asynchronously 
    // when the response is available 
    }). 
    error(function(data, status, headers, config) { 
    // called asynchronously if an error occurs 
    // or server returns response with an error status. 
    }); 

http://docs.angularjs.org/api/ng.$http

+0

Có thiết 'var tìm kiếm = $ tài nguyên (...) 'trước không làm các trick? Tôi cho rằng tôi vẫn đang nghiên cứu ý tưởng về các dịch vụ và nhà máy ở góc cạnh. Ngoài ra, thử đầu tiên của tôi là với '$ http' và nó hoạt động tốt. Tôi cũng muốn thử '$ resource', chỉ để có cảm giác sử dụng. Cảm ơn! – sa125

+3

Hm var Search = $ resource (...) thực sự là chính xác. Tuy nhiên tài nguyên hy vọng một đối tượng được trả về nhưng bạn trả về một mảng? thử thiết lập isArray: true trên phương thức truy vấn của bạn, vấn đề tương tự https://groups.google.com/forum/#!topic/angular/MT1vIakNEVM –

+1

Tại sao bạn ghi đè tham số truy vấn? – Vincent

Các vấn đề liên quan