AngularJs 应用程序中的嵌套超时答案

【问题标题】：Nested timeouts in AngularJs appAngularJs 应用程序中的嵌套超时
【发布时间】：2017-12-13 03:48:42
【问题描述】：

在 Angular 1.x 控制器中具有这样的结构是否正确，并且 $timeout 包含在另一个 $timeout 中？

$timeout(function () {
    $timeout(function () {
        callbackFn($event);
    });
});

更具体一点：

我在指令链接函数中有一个超时，在指令的控制器中有另一个超时。现在，每次呈现指令时，它们都会以随机顺序执行。我发现具有两个嵌套超时的解决方案可以正常工作，但我不确定以这种方式使用它们是否可以。

一个例子：https://codepen.io/neptune01/pen/jYOGPO

【问题讨论】：

定义“正确”
但是为什么呢？语法看起来不错，但通常你会添加总时间并只使用一个$timeout，那么为什么要同时使用呢？
@AlonEitan 我的意思是，确保它在某些尚未发现的情况下不会产生一些不良的副作用。
@AlekseySolovey 我需要将该函数调用移动到调用堆栈的最后，该调用堆栈最后已经有一些函数调用被前一个 $timeout 移到了那里。这就是我添加两个非延迟超时的原因。
@neptune 也许是XY problem？您能否尝试更详细地解释您最初想要达到的目标，这可能会为您带来新的方法

标签： javascript angularjs

【解决方案1】：

要按顺序处理请求的两个或多个函数（在您的情况下，在指令和控制器之间[第一个指令，然后是控制器]），您可以在它们之间传递模型。

更多解释

在应用程序中拥有一个模型是一种强大的策略，可以让您的应用程序变得灵活。

例如

$scope.model = { anything: false }

如果我们尝试在我们的指令中传递这个$scope，那么我们在控制器和我们的指令之间有两种方式绑定，我将在您的示例中向您展示它是如何工作的。

app.js

var app = angular.module('app', []);

app.directive('cDir', function($timeout){
return {
  restrinct: 'E',
  controller: 'appCtrl',
  template: 'cdir template',
  scope: {
    ready: '='
  },
  link: function(scope){
    console.log('t1');
    scope.ready = true;
  }
}})

app.controller('appCtrl', ['$scope', function($scope) {
    $scope.ready = false;
    $scope.$watch('ready', function(isReady){
      if(isReady){
         console.log('t2');
      }
    })
}]);

查看

<div ng-app="app">
  <c-dir ready="ready"></c-dir>
</div>

我们将$scope.ready定义为模型到指令，当ready是指令中的true时出现console.log('t2')；我们使用$watch 作为$scope 的监听器。

【讨论】：