AngularJS передает параметр из вида в контроллер

Question

Я новичок в angularjs. То, что я пытаюсь сделать, это передать данные в контроллер, чтобы они возвращались на его сторону, отличные от заводских. Проблема заключается в том, что когда происходит вызов метода с параметрами с некоторой точки зрения, результатом является бесконечный цикл.

У меня есть следующий конфиг:

    app.config(function($locationProvider, $stateProvider, $urlRouterProvider) {
    $locationProvider.html5Mode({
        enabled: true,
        requireBase: false
    }).hashPrefix('!');
    $urlRouterProvider.otherwise('/home');
    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'templates/home.html',
    controller: 'StoreController as store'              
        })
})

Моя фабрика это:

app.factory('BookFactory', function($http, $q){
    var service = {};
    var baseUrl = 'http://someAPI/ ';
    var _query = '';
    var _finalUrl = '';
    var makeUrl = function() {
        _finalUrl = baseUrl + _query;
    }
    service.setQuery = function(query) {
        _query = query;
    }
    service.getQuery = function() {
        return _query;
    }
    service.callBooks = function() {
        makeUrl();
        var deffered = $q.defer();
        $http({
            url: _finalUrl,
            method: "GET"
        }).success(function(data, status, headers, config) {
            deffered.resolve(data);
        }).error(function(data, status, headers, config) {
            deffered.reject
        })
        return deffered.promise;
    }
    return service;
});

И контроллер это:

app.controller('StoreController', ['BookFactory',function(BookFactory) {  
    var store = this;
    store.products = [];
    this.submitQuery = function(param) {
        BookFactory.setQuery(param);

        BookFactory.callBooks()
            .then(function(data){
                store.products = data;
            }, function (data) {
                alert(data);
            });         
    }   
}]);

Home.html, когда я вызываю метод следующим образом:

ng-repeat="product in store.submitQuery('php')"

Это вызывает бесконечный цикл, и я не могу понять, почему, но если я немного изменю контроллер следующим образом:

    app.controller('StoreController', ['BookFactory',function(BookFactory) {  
    var store = this;
    store.products = [];
    this.submitQuery = function(param) {
        BookFactory.setQuery(param);
        BookFactory.callBooks()
            .then(function(data){
                store.products = data;
            }, function (data) {
                alert(data);
            });
    }
    this.submitQuery('php');
}]);

Разница в том, что в контроллере submitQuery называется

Чем в home.html:

ng-repeat="product in store"

Дела идут хорошо, но хотелось бы, чтобы точка зрения президентов передавала разные параметры.

Заранее спасибо.

Answer 1

ng-repeat="product in store.submitQuery('php')"

конечно это сделает бесконечный цикл, потому что когда вы делаете запрос,ng-repeat перерисовывает и вызывает один и тот же запрос снова и снова, чтобы передать различные параметры для запроса, вы можете связать любую переменную для просмотра

HTML

<input ng-model="queryParam" />

контроллер

app.controller('StoreController', ['BookFactory','$scope',function(BookFactory,$scope) {  
    var store = this;
    $scope.store.products = [];
    $scope.queryParam="php";     

    this.submitQuery = function() {
        var param=$scope.queryParam;
        BookFactory.setQuery(param);
        BookFactory.callBooks()
            .then(function(data){
                store.products = data;
            }, function (data) {
                alert(data);
            });
    }
    this.submitQuery();    
}]);

и вы можете установить значение ввода и, таким образом, передать параметр запроса в контроллер

Answer 2

Спасибо за Ваш ответ

Не только в нг-повторе происходит. Я имею в виду, даже если store.submitQuery('php') выполняется без ng-repeatрезультат будет таким же (бесконечный цикл).

Однако для меня с семантической точки зрения использовать дополнительный элемент HTML для этого не очень хорошо. Я изменил вид следующим образом:

<div ng-init="store.init('php')" ng-controller="StoreController as store">
    {{store}}
</div>

И немного контроллер:

app.controller('StoreController', ['BookFactory',function(BookFactory) {  
    var store = this;
    store.products = [];

    this.init = function(param) {
        BookFactory.setQuery(param);
        this.submitQuery();
    }

    this.submitQuery = function(param) {
        BookFactory.callBooks()
            .then(function(data){
                store.products = data;
            }, function (data) {
                alert(data);
            });
    }
}]);

И теперь он работает так, как мне нужно, но я не уверен, что это правильный путь.