NG-CLICK中的多个函数仅在函数上触发一次

multiple functions in ng-click only fire on function once

本文关键字：函数 一次 NG-CLICK      更新时间：2023-09-26

我创建了一个函数，它结合了另外两个可以单独触发的函数（recorder.start（）和recorder.stop（））。当我尝试一键添加这些功能时，程序一次只能触发一个函数。如果程序想要触发第二个函数，我必须再次按下按钮。按下一次按钮后是否可以触发两个功能？

JavaScript

$scope.record = function() {
        recorder.start($scope.recordConfig).then(function() {
            var test = $scope.recordConfig.captureSource;
        recorder.stop();
        })
    },
n.start = function(e) { 
        return t.postMessage("start", e)
    }, 
n.stop = function() {
        t.postMessage("stop")
    }, 
c.postMessage = function(e, t) { 
            return c.getPort().then(function(n) { 
                return n.postMessage({
                    type: e, 
                    data: t
                })
            })
        },

.HTML

<md-button ng-click="record()" class="md-primary md-raised">Start Recording</md-button>

====

===========================================================================
  • 进一步的问题：在这个阶段，我尝试在弹出窗口中使用以下代码.html.js在一个动作中控制两个函数。但是我发现当用户更改为另一个chrome选项卡时，弹出窗口将关闭。正如 https://developer.chrome.com/extensions/faq#faq-dev-05 所解释的那样，"当用户专注于弹出窗口之外的浏览器的某些部分时，弹出窗口会自动关闭。您知道保持弹出窗口始终打开的方法吗？或者让 stop（） 可以在弹出窗口关闭时运行。

弹出窗口.html.js

    $scope.recordStart = function() {
       // recorder is an angular module which can postMessage such as start/stop/pause... ...
       recorder.start($scope.recordConfig)
        .then(function() {
            var test =  $scope.recordConfig.captureSource;
            "tab" !== test && "desktop" !== test || a.IS_E2E;
        })     

$scope.stop = function() {
        recorder.stop();
    }, 
$scope.record = function() {
      $scope.recordStart();
        $timeout(function(){$scope.stop(); },4000)
 }

此示例向您展示如何使用$timeOut一键调用两个函数

在"CallFun"中，我们手动使用$timeout，在2秒后调用"fun2（）"。

您也可以通过调用 API 来做到这一点。

var app = angular.module("app", [])
app.controller("ctrl", function($scope, $timeout){
  $scope.fun1 = function(){
    $scope.message = "Return function 1"
  }
  
  
  $scope.fun2 = function(){
    $scope.message = "Return function 2"
  }
  
  ///this is manually timeout
  $scope.callFun = function(){
    $scope.fun1();
    $timeout(function() {
      $scope.fun2();
    }, 2000);
  }  
});
<html>
  <head></head>
  <body ng-app="app" ng-controller="ctrl">
    
    <button ng-click="callFun()">call functions with $timeout</button>
    
    {{message}}
    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  </body>
</html>

对于函数，第二个参数是你应用的回调，但如果你仔细检查它，你会发现你也在注入第三个参数，并认为它作为一个回调工作。您可以通过在另一个函数中调用一个函数来轻松完成此操作。

例如。 

$scope.ParentFunction=function(){
   $scope.child_sibling1();
}
$scope.child_sibling1=function(){
    $scope.child_sibling2();
}
$scope.child_sibling2=function(){
  //your code
}
相关文章：