AngularJS隔离作用域指令&绑定返回Promise时$scope.run.then未定义问题

咱们一步一步拆解你遇到的$scope.run.then is undefined问题：

核心问题分析 #

1. 控制器执行顺序逻辑错误
   你在控制器里先调用了$scope.run.then(...)，但此时$scope.run还完全未定义——你是在这行代码之后才给$scope.items赋值，而且$scope.run本身从来没被初始化为一个Promise或者能返回Promise的函数。

2. 指令的&绑定被错误覆盖
   指令里的onComplete: '&'是用来绑定父作用域表达式的，它本质是一个返回表达式执行结果的函数，但你直接把scope.onComplete赋值成了$http.get('page.html')的Promise，这完全破坏了AngularJS隔离作用域的绑定规则，父作用域根本拿不到这个Promise。

修正后的代码示例 #

HTML部分

<div ng-repeat="item in items"> 
  <div dir1 x="item.x" on-complete="item.onComplete(promise)"></div> 
</div>

JavaScript部分

angular.module("app", [])
.controller('ctl', function($scope) {
  // 先初始化$scope.run为处理Promise的函数
  $scope.run = function(promise) {
    promise.then(function(response){
      alert(response.data); // 注意$http返回的response包含data属性，需按需取值
    });
  };

  // 再定义items数组
  $scope.items = [
    {x: 1, onComplete: $scope.run}, 
    {x: 2, onComplete: $scope.run}, 
    {x: 3, onComplete: $scope.run}
  ];
})
.directive('dir1', function ($timeout,$http) {
  return {
    restrict: 'EA',
    scope: { 
      x: '=', 
      onComplete: '&' 
    },
    link: function (scope, element, attrs) {
      // 发起请求拿到Promise
      const requestPromise = $http.get('page.html');
      // 通过&绑定的函数，把Promise传递给父作用域
      scope.onComplete({ promise: requestPromise });
    }
  };
})

关键修正点 #

• 调整控制器执行顺序：先定义$scope.run函数，再初始化$scope.items，避免调用未定义的变量。
• 正确使用&绑定传递Promise：&绑定的函数可以通过键值对传递参数（键要和表达式里的参数名一致），指令里把请求得到的Promise传给父作用域的onComplete函数，让父作用域去处理then逻辑。
• 注意$http返回值结构：$http.get返回的Promise回调参数是一个包含data、status等属性的对象，需要根据需求提取对应内容。

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