关于如何调用AngularJS函数的问题

Question

我不知道为什么，但是一旦路由加载，我就会有几次调用2-4次函数。我几乎有任何路线。就好像控制器使函数激活一样，虽然我不打算在ng-click等之前调用它。我的代码中没有任何$ watchers。我正在使用UI路由器，我确实在路由选项和页面本身中分配了一个控制器。是的，我确实使用init函数在某些事件后重新加载页面。在添加之前，这仍然给我同样的问题。

我可以举一个简单的例子，从正在加载的HTML开始：

<a ng-click="finalizarCompra()" class="button btn-ing transition notopmargin fright">Finalizar compra</a>

控制器本身：

    .controller('CarritoController',
        ['$scope', '$http', 'Carrito',
        function ($scope, $http, Carrito, Session) {

            $scope.initCarrito = function(){
                Carrito.getCart();
            };

            $scope.tieneProductos = function() {
                return Carrito.getCart().length > 0;
            };

            $scope.productos = Carrito.getCart();

            $scope.total = Carrito.totalCarrito();
            $scope.finalizarCompra = Carrito.finalizarCompra();
        }])

// The factory it's using:

.factory('Carrito', ['$http', 'Productos', 'Session', 
            function ($http, Productos, Session){

        var carritoUsuario = [];
        var todosLosProductos = Productos.todos();
        var unProducto = function() {}
            return {

            findBySKU : function(sku) {
                console.log("Finding: " + sku + " from Carrito service findBySKU...");
                return _.find(carritoUsuario, function (producto){
                    return producto.SKU == sku; 
                });
            },

            getProducto : function(id) {
                console.log("Getting: " + id + " from Carrito service getProducto...");
                return Producto.findById(id);
            },

            getCart : function() {
                console.log("Getting cart from Carrito service getCart");
                return carritoUsuario;
            },

            addToCart : function(Prod, cant, m1, m2, m3, m4, m5) {

                unProducto.SKU = "" + Prod.stockid + m1 + m2 + m3 + m4 + m5;
                /*
                s*/
                console.log("Constructed product SKU is: ");
                console.log(unProducto.SKU);


                if(angular.isDefined(this.findBySKU(unProducto.SKU))) {
                    var i = _.findIndex(carritoUsuario, function (prod) {
                        return prod.SKU ==  unProducto.SKU
                    });
                    carritoUsuario[i].Cantidad += unProducto.Cantidad;
                } else {
                    carritoUsuario.push(unProducto);
                }
                console.log(carritoUsuario);
            },


            finalizarCompra: function () {

                var lineas = [];

                    _.forEach(carritoUsuario, function (e) {
                        var obj = {
                                    "stockid" : e.stockid,
                                    "cantidad" : e.Cantidad,
                                    "sku" : e.SKU,
                                    "precio": e.Precio
                                  }
                        lineas.push(obj);
                        }

                    )
                    var calipsoData = {idUser: Session.recallId(), 
                        "lineas":lineas};
                    console.log("Data being sent to calipso is: ");
                    console.log(angular.toJson(calipsoData));

                $http.post('http://restservice', 
                    angular.toJson(calipsoData))
                    .success(function (data){
                        console.log("Alta Pedido exitoso. Data recibido: ");
                        console.log(data);
                    })
                }

        };

    }])

如果这个问题看起来模糊不清，我很抱歉，但我希望有更多Angular经验的人之前有类似的经历。我不应该在调用之前获得一个页面上发生的任何事情的控制台日志。在finalizarCompra（）中，它以某种方式在页面加载而不是ng-click

上被调用

更新：改变这个：

$scope.finalizar = Carrito.finalizarCompra();

到这个

$scope.finalizar = Carrito.finalizarCompra;

没有解决问题。它从未被调用的事实毫无意义。

Answer 1

在页面加载时执行函数的问题是因为这一行：

$scope.finalizarCompra = Carrito.finalizarCompra();

请注意，函数引用后的括号()会导致执行该函数。因此，您需要将其更改为：

$scope.finalizarCompra = Carrito.finalizarCompra;

现在您要在范围内存储对该函数的引用。

修改

另一件看起来很可疑的事情是控制器中的这个功能：

$scope.initCarrito = function(){
    Carrito.getCart();
};

该功能未在您的控制器中使用，因此我假设它是从HTML模板调用的。因为它是从HTML中调用的，所以每次运行Angular摘要时都会看到这个函数运行（很常见）。

它看起来像初始化代码，因此您可以在控制器内部运行它。事实上，你不一定需要一个功能，可以这样做：

.controller('CarritoController',
        ['$scope', '$http', 'Carrito',
        function ($scope, $http, Carrito) {
            // executes only once, when the controller is created
            Carrito.getCart();

            $scope.tieneProductos = function() {
                return Carrito.getCart().length > 0;
            };

            $scope.productos = Carrito.getCart();

            $scope.total = Carrito.totalCarrito();
            $scope.finalizarCompra = Carrito.finalizarCompra;
        }])