AngularJS pass param from view to controller - angularjs

Question

I'm a beginner in angularjs. What I’m trying to do is from view to pass params to the controller, which to return at its side, different results from factory. The problem is that when it goes to call metod with params from some view the result is an infinity loop.
I've the following config:
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'
})
})
My Factory is:
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;
});
And the controller is:
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 when I call the method as follows:
ng-repeat="product in store.submitQuery('php')"
This causes an infinite loop and I can’t understand why, but if I change a bit the controller in the following way:
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');
}]);
The difference is that in the controller submitQuery is called
Than in home.html:
ng-repeat="product in store"
Things are going well but I wish thought the през view to pass different parameters.
Thanks in advance.

Answer 1

ng-repeat="product in store.submitQuery('php')"
of course this will make infinite loop ,cause when you make request,ng-repeat is redrawing and invoke same query over and over,
in order to pass diffrent param for query you can bind any variable to view
html
<input ng-model="queryParam" />
controller
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();
}]);
and you can set up value of input and thus pass query param to contoller

Answer 2

Thanks for your answer
Not only in ng-repeat is happening. I mean, even if store.submitQuery('php') executes without ng-repeat, the result will be the same (infinity loop).
However for me from semantic point of view to use additional html element for this is not very good.
I changed the view like this:
<div ng-init="store.init('php')" ng-controller="StoreController as store">
{{store}}
</div>
And little bit the controller:
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);
});
}
}]);
And now it’s working like I need, but I’m not sure this is the right way.