Question

In this plunk我有一个指令数组，它返回一个映射到控制器中某个函数的promise，但是$scope.run.then是undefined。这段代码出了什么问题？

HTML

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

的Javascript

angular.module("app", [])

.controller('ctl', function($scope) {

  $scope.run.then(function(response){
      alert(response);
  });

  $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) { 
            scope.onComplete = $http.get('page.html');
        }
    };
})

Answer 1

.directive('dir1', function ($timeout,$http) {
    return {
        restrict: 'EA',          
        scope: {
            x: '<',
            onComplete: '&'         
        },
        link: function (scope, element, attrs) {
            scope.$watch("x", function(newValue) {
                if (newValue) {
                    var url = "page"+newValue+".html"; 
                    var httpPromise =  $http.get(url);
                    scope.onComplete({$promise: httpPromise});
                };
            });
        }       
    };
})

使用表达式&绑定时，解析的表达式求值函数接受局部变量上下文对象。

当指令调用scope.onComplete(locals)函数时，on-complete属性定义的Angular Expression将使用父作用域进行评估。在本地上下文对象中定义的任何变量都将覆盖父作用域变量。

该指令创建的承诺公开为$promise。

推荐：使用美元符号$添加局部变量，以区别于父作用域变量。

有关详细信息，请参阅AngularJS Comprehensive Directive API Reference - scope。

用法

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

.controller('ctl', function($scope) {

      $scope.items = [
                 {x: 1, onComplete: run},
                 {x: 2, onComplete: run},
                 {x: 3, onComplete: run}
      ];

      function run(promise) {
          promise.then(function(response){
              console.log("OK", response.status);
              console.log("URL", response.config.url); 
          }).catch(functon(response) {
              console.log("ERROR",response.status);
              console.log("URL", response.config.url);
          });
      };
})

使用`＆amp;`绑定从isolate scope指令返回一个promise

1 个答案:

用法