如何在ui-router中用$watch使API先于指令触发？含resolve配置咨询

我来帮你搞定这个问题！你遇到的核心问题是指令在API返回数据前就提前执行，导致没有可用数据渲染页面。用$watch实现指令等待数据就绪的思路其实很清晰，咱们一步步来：

第一步：在控制器中规范API调用与数据绑定 #

首先，你需要把API调用的结果绑定到控制器的$scope上，并且初始化时设为null（或者其他表示未加载的状态），这样指令就能通过监听这个变量来判断数据是否准备好。

假设你的控制器可以调整成这样：

angular.module('yourApp').controller('summaryCtrl', function($scope, PLANSPONSOR.SUMMARY) {
  // 初始化数据为null，标记未加载状态
  $scope.sponsorSummaryData = null;

  // 执行API调用（如果PLANSPONSOR.SUMMARY是返回Promise的服务，直接调用即可）
  PLANSPONSOR.SUMMARY.getPlanData().then(function(apiResponse) {
    // API返回成功后，把数据绑定到scope上
    $scope.sponsorSummaryData = apiResponse.data;
  }).catch(function(error) {
    console.error('获取计划数据失败:', error);
  });
});

第二步：在指令中用$watch监听数据变化 #

接下来，在你的指令里，通过$watch监听控制器$scope上的sponsorSummaryData变量。当这个变量从null变成有效数据时，再执行指令的核心渲染逻辑。

指令示例代码：

angular.module('yourApp').directive('planSummaryDirective', function() {
  return {
    restrict: 'EA', // 根据你的需求调整指令类型
    templateUrl: 'path/to/your/directive/template.html',
    link: function(scope, element, attrs) {
      // 注册watch监听数据变化
      var unwatchHandler = scope.$watch('sponsorSummaryData', function(newData, oldData) {
        // 只有当新数据存在时，才执行指令逻辑
        if (newData) {
          // 这里写你的指令核心逻辑：比如填充页面内容、初始化组件等
          renderPlanSummary(newData);
          
          // 数据已经加载完成，解除watch避免后续不必要的监听
          unwatchHandler();
        }
      }, true); // 第三个参数设为true，开启深度监听（如果你的数据是复杂对象的话必须加）

      // 封装指令的渲染逻辑
      function renderPlanSummary(data) {
        // 示例：把数据绑定到指令的scope，供模板使用
        scope.planData = data;
        // 其他DOM操作或业务逻辑...
      }
    }
  };
});

额外补充：更优雅的Resolve优化方案 #

其实你已经用到了UI-Router的resolve，如果把API调用直接放在resolve里，会更高效——因为resolve会在State激活、控制器和指令初始化之前完成数据加载，这样页面初始化时就直接有数据可用，不需要额外的$watch。

比如调整你的State配置：

state: {
  url: "/summary",
  templateUrl: '../script/planSummary.html',
  controller: "summaryCtrl",
  params: {obj: null},
  resolve: {
    // 把API调用放在resolve里，返回Promise
    planSummaryData: function(PLANSPONSOR.SUMMARY) {
      return PLANSPONSOR.SUMMARY.getPlanData().then(function(res) {
        return res.data;
      });
    }
  }
}

然后在控制器里直接注入这个resolve的结果：

angular.module('yourApp').controller('summaryCtrl', function($scope, planSummaryData) {
  // 直接拿到resolve加载好的数据
  $scope.sponsorSummaryData = planSummaryData;
});

这种情况下，指令初始化时sponsorSummaryData已经是有效数据了，不需要$watch也能正常工作。不过既然你明确要求用$watch，前面的方案完全能满足你的需求。

内容的提问来源于stack exchange，提问作者Insane Fragger