AngularJS-我怎么知道何时解决了对父控制器的承诺

AngularJS - How can I know when a promise on a parent controller has been resolved?

本文关键字：控制器 承诺 我怎么知道 何时 解决 AngularJS-      更新时间：2023-09-26

我有一个指令，它依赖于其父控制器的数据。此数据以承诺的形式返回。我如何知道存在于父控制器上的承诺何时得到解决？

父控制器

angular.module("UserShoes").controller("UserController", function ($scope) {
  $scope.user = User.get({
    userId: 1 
  });
  $scope.shoes = [];
  $scope.user.$promise.then(function (data) {
    data.shoes.forEach(function (shoe, index) {
      if (shoe) {
        $scope.shoes.push(shoe);
      }
    });
  });
});

指令

angular.module("UserShoes").directive("Shoes", ["", function () {
  return {
    ...
    controller: function ($scope) {
      // When will $scope.parent.shoes be ready? :-(
    }
    ...
  }
}]);

您可以广播一个事件并在指令中侦听该事件。

来自您的上级控制器：

angular.module("UserShoes").controller("UserController", function ($scope) {
      $scope.user = User.get({
        userId: 1 
      });
      $scope.shoes = [];
      $scope.user.$promise.then(function (data) {
        data.shoes.forEach(function (shoe, index) {
          if (shoe) {
            $scope.shoes.push(shoe);
          }
        });
        $scope.$broadcast('shoes-ready',$scope.shoes);
      });
    });

根据您的指令

$scope.$on('shoes-ready',function(evt,shoes){ /*process shoes*/})

将$promise导入指令的作用域应该很好。使用&将其作为绑定表达式导入：

视图：

<div user-shoes shoes-promise="user.$promise" ... ></div>

指令：

angular.module('myModule')
.directive("Shoes", ["", function () {
  return {
    ...
    scope: {
      shoesPromise: '&'
    }
    ...
  }
}])

然后，在指令的link函数中，您可以使用已解析的promise执行一些操作：

function link(scope) {
  scope.shoesPromise()
    .then(function(){
      ...
    })
    .catch(...)
}

我会在控制器中使用$watch和flag，而不是使用$broadcast，这在理论上可能会变得昂贵。类似于：

angular.module("UserShoes").controller("UserController", function ($scope) {
  $scope.user = User.get({
    userId: 1 
  });
  $scope.shoes = [];
  $scope.user.$promise.then(function (data) {
    data.shoes.forEach(function (shoe, index) {
      if (shoe) {
        $scope.shoes.push(shoe);
      }
    });
    $scope.shoes_ready = true;
  });
});

然后在你的指令中：

var stop_watch = scope.$watch('shoes_ready', function(new_value) {
  if (new_value === true) {
    // do work son
    stop_watch();  // Optional, if you are done with this watcher
  }
});
相关文章：