Question

我有这个Angular函数多次触发，我很困惑为什么会这样做。在后端，我有一个console.log（）语句，每次点击端点时都会记录。该声明引发了4次。 instagramService.tapInsta（）; 应该只被调用一次。有人能告诉我为什么以及如何发生这种情况？

'use strict';

console.log("OUTSIDE alloyController");

angular.module("mainModule")
    .controller('alloyController', function ($scope, instagramService) {

    console.log("INSIDE alloyController");

    $scope.windowInfoWithToken = instagramService.getWindowInfo();

    instagramService.tapInsta($scope.windowInfoWithToken, function (response) {

        $scope.instagramData = response.data;

        if (!response.data.access_token == undefined) {

            $scope.instagramDataWithToken = response.data.access_token;

        } else {

            $scope.hideThisDiv = true;
        }

        console.info(response.data);

    });

});

在回复评论时，我在服务中完成了实际的API调用：

'use strict';

console.log("OUTSIDE dataService");

angular.module("mainModule")
    .service('instagramService', function ($http) {

    console.log("INSIDE dataService");

    this.tapInsta = function (access_token, callback) {

        $http({
            method: 'POST',
            url: '/ig',
            data: {
                token: access_token
            }
        })

        .then(callback);
    }

    this.tapInstaExtended = function (access_token, instaQuery, callback) {

        $http({
            method: 'POST',
            url: '/instaInputQuery',
            data: {
                token: access_token,
                query: instaQuery
            }
        })

        .then(callback);
    }

    this.getHandleAuth = function (callback) {


        $http({
            method: 'GET',
            url: '/handleauth',
            data: {
                name: "LTQ"
            }
        })

        .then(callback);

    }

    this.getWindowInfo = function () {

        var windowLocation = window.location.href;

        if (windowLocation.indexOf("losethequit") != -1) {
            var windowLocationWithToken = windowLocation.replace("https://losethequit.herokuapp.com/views/werkspayce.html?code=", "");
        } else {
            var windowLocationWithToken = windowLocation.replace("http://localhost:5000/views/werkspayce.html?code=", "");
        }

        return windowLocationWithToken;

    };

});

Answer 1

将debugger;插入到函数体中，打开（在chrome中推荐）“Developer tools”（只需检查一个元素）并选中“Call stack”，这样就可以看到调用它的函数了。 / p>

Answer 2

页面上有多少个这样的实例？我相信Angular将为每个实例配备一个控制器，这可能导致此API调用多次发生。通常，您最好在服务（服务，工厂或提供商，请选择）中放置API调用，这将是应用程序中的单例。

Answer 3

您没有显示它，但是您使用的是路由吗？如果是，您是否在路由模板和标记/视图中调用控制器？如果是这样，这可能导致所有函数触发两次。

您只需要在路由中呼叫控制器。

Answer 4

谢谢大家的帮助。似乎在多个指令中使用相同的控制器调用控制器中的多个函数。因此，如果您在3个不同的指令中使用控制器 - 直接从服务调用的任何语句（而不是嵌套在$ scope函数中）将被调用3次。仅供参考。

   'use strict';

    console.log("OUTSIDE instagramDirective");

    angular.module("mainModule")
    .directive('instagram', function () {

    console.log("INSIDE instagramDirective");

    return {
        templateUrl: '/templates/instagram.html',
        controller: 'instagramController',
        replace: false
    }

});

如何防止Angular方法多次触发？

4 个答案: