2016-02-24 5 views
0

Я начинаю изучать angularJS, и я зацикливаюсь на том, как передать переменную на завод и обновить ресурс при событии click.Обновить запрос ресурсов на клик в угловой фабрике?

В частности, я не знаю, как передать переменную поиска из поля формы на завод, передав ее вместо жесткокодированного '???' в params: {query: '???'} ... Затем при отправке ресурс должен быть снова выбран с этим параметром поиска ... Я попытался использовать переменную «searchterms», но он выводит «searchterm» undefined в консоль.

<html ng-app="notmuchApp"> 
    <head> 
    <meta charset="utf-8"> 
    <title>notmuch sinatra</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> 
    <script src="js/angular.js"></script> 
    <script src="js/angular-resource.js"></script> 
    <script src="js/ui-bootstrap-tpls-1.1.2.js"></script> 
    <script> 

    var notmuchApp = angular.module('notmuchApp', ['ui.bootstrap','ngResource']); 
    notmuchApp.controller('handleSearch', ['$scope', 'getSearch', 
    function ($scope, getSearch) { 
     $scope.searchresults = getSearch.query(); 
    }]); 

    notmuchApp.factory('getSearch', function ($resource) { 
    return $resource('/notmuch/search', {}, { 
     query: { method: 'GET', params: {query:'???'}, isArray: true }, 
    }) 
}); 

    </script> 
    </head> 
<body > 
    <div ng-controller="handleSearch"> 
    <form ng-submit="getSearch"> 
    <input type="text" ng-model="searchterm"> 
    <input type="submit" value="Search"> 
    </form> 
    Results: 
    <ul> 
     <li ng-repeat="searchresult in searchresults"> 
     {{searchresult.date_relative}} {{searchresult.authors}} {{searchresult.subject}} 
     </li> 
    </ul> 
    </div> 
</body> 
</html> 

ответ

0

обычно, ваш завод не будет возвращать результат напрямую, а «обслуживание» объект, который имеет метод «getSearch»:

notmuchApp.controller('handleSearch', ['$scope', 'SearchService', 
    function ($scope, SearchService) { 
     SearchService.getSearch("aaa","bb").then(
     function(results) { 
      $scope.searchresults = results; 
     }, 
     function(error) { 
      // display error message 
     } 
    ); 
    }]); 

notmuchApp.factory('SearchService', function ($resource) { 
    return { 
    getSearch : function(param_a, param_b) { 
     // do your ajax with param a and b 
     return results 
    } 
}); 

также, вы в мире асинхронного выполнения, поэтому я взял на себя смелость изменить свой код с «$ scope.results = getResults()», чтобы правильно выполнять обещания (плюс обработка ошибок).