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

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

'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; 

    }; 

});

来源

2016-05-16 LTQ

多少次是在页面上使用该控制器？ – aaronofleonard

有多少这种情况下，在页面上？我相信Angular会为每个实例设置一个控制器，这会导致此API调用多次发生。通常情况下，将API调用放置在服务（服务，工厂或提供商，请选择）中会更好，这将成为应用程序中的单例。

来源

2016-05-16 15:16:11

只有一个调用页面上的控制器。 – LTQ

将debugger;插入函数体中，打开（在Chrome中推荐）“开发人员工具”（简单地检查一个元素）并选中“调用堆栈”，以查看调用它的函数。

来源

2016-05-16 15:20:13 Stevik

（匿名函数）（alloyController.js：141）（匿名函数）（angular.js：15961）。 N $的eval（angular.js：17229） N $摘要（angular.js：17045）。 ñ 。$ apply（angular.js：17337） l（angular.js：11572） H（angular.js：11778） u.onload（angular.js：11711） – LTQ

这就是“调用堆栈”显示的内容。 – LTQ

@LTQ所以你应该点击每个功能，你会选择调用它的代码 – Stevik

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

您只需要在路由中调用控制器。

来源

2016-05-16 15:22:57

@chrstianhill对不起 - 是的，我是肯定表达四路由。我没有使用路由模板，我的控制器只能在一个html文件中调用 - 这个html文件包含多个指令。 – LTQ

谢谢大家的帮助。看起来好像在多个指令中使用相同的控制器调用控制器倍数中的函数。因此，如果您在3个不同的指令中使用控制器 - 直接从服务调用的任何语句，而不是嵌套在$ scope函数中，将被调用3次。只是FYI。

'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 
    } 

});

来源

2016-05-16 17:19:08 LTQ

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

回答

相关问题