编写嵌套指令时如何解决缺乏承诺展开答案

【问题标题】：How to solve lack of promise unwrapping when writing nested directives编写嵌套指令时如何解决缺乏承诺展开
【发布时间】：2014-10-19 16:25:34
【问题描述】：

我有一些嵌套指令：

<first-directive>
  <second-directive user="user">
    <third-directive name="name">
      <fourth-directive description="description">

第一个指令的模板有第二个指令，第二个指令的模板有第三个指令，以此类推。所有指令都有独立的作用域。

第一个指令在自己的范围内设置user 对象。如果它以同步方式执行（$scope.user = {name: "Alice"}，那么一切都很好。但是，如果它以异步方式加载用户（例如$http.get(url).then(function (user) { $scope.user = user }），那么所有其他指令都将不起作用，因为例如当控制器功能评估第二个指令，user 尚未在其范围内设置。

到目前为止，我发现的唯一解决方案是在所有嵌套的 Promise 中使用 $scope.$watch（例如，$scope.$watch("user", function (user) { $scope.name = user.name} 用于第二个 Promise），这很糟糕，因为如果我想使用我已经在某处使用的指令else inside <first-directive>，我需要重写它以使用$scope.$watch...

还有其他方法可以解决吗？我知道我可以加载第一个指令所需的数据，例如在它使用的路由的resolve 函数中，但我希望能够在不修改任何路由或控制器的情况下将此指令放在任何页面中。

【问题讨论】：

为什么不在路由中解析用户而不是在控制器中获取用户？
我正在获取指令控制器中的对象，而不是路由控制器。我想创建一个可以放在任何页面上的独立组件，它会自行获取所需的数据。如果没有在任何地方添加 $scope.$watch 就无法使其工作，我可能最终会在使用该组件的路由中获取数据，但如果可能的话我想避免它。

标签： javascript angularjs angularjs-directive angular-promise

【解决方案1】：

不是 100% 确定它适合您的用例，但如果第一个指令总是异步加载用户，它可以在其模板中使用 ng-if：

template: '<second-directive ng-if="user" user="user"></second-directive>'

这样，在用户真正可用之前，不会编译第二个指令（第三个或第四个指令也不会）。

这也使得在链中使用其他指令成为可能，而无需添加$watch。

如果您需要在用户已经可用的其他地方使用第二个指令，您可以在没有ng-if 的情况下使用它。

【讨论】：