Question

我是angularjs的初学者。我正在尝试做的是从视图传递参数到控制器，在它的侧面返回，与工厂不同的结果。问题是，当从某个视图调用带有参数的metod时，结果是一个无限循环。

我有以下配置：

    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

感谢您的回答

不仅在ng-repeat正在发生。我的意思是，即使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);
            });
    }
}]);

现在它的工作方式与我的需要相同，但我不确定这是否正确。

AngularJS将param从视图传递给控制器

2 个答案:

HTML

控制器