Question

如果我的问题听起来很幼稚（我是一个有角度的菜鸟），我会提前道歉。但这是我的问题：

我有3个通过Ajax加载的对象，这些对象在我页面上的所有指令中共享（我为每个对象创建了一个工厂）。让我们称这些对象为A，B和C.我还有3个指令依赖于不同的对象：

指令1要求对象A和B完成加载
指令2和3要求对象A，B和C完成加载

如何以满足此要求的方式设置指令？

Answer 1

您可以在控制器中解析工厂的承诺，并将指令的属性绑定到已解决的承诺值。然后使用ng-if防止指令加载，直到promise值可用为止。

http://plnkr.co/edit/pBMME4Bdhpif7h4QKnn4?p=preview

<!-- Directive markup -->
<div ng-if="factorya && factoryb" directive-a factorya="factorya" factoryb="factoryb"></div>  

//Controller Code
app.controller('myController', ['$scope', 'factorya','factoryb',

    function($scope, factorya, factoryb){
       factorya().then(function(result){
           $scope.factorya = result;
       });

       factoryb().then(function(result){
           $scope.factoryb = result;
       });

    }

]);

//Directive Code  
app.directive('directiveA', [

  function(){

    return{
      restrict: 'AE',
      scope: {
        factorya:'=',
        factoryb:'='
      },
      link: function(scope){

        alert("Directive A: " + scope.factorya.ajaxResult);

        alert("Directive B: " + scope.factoryb.ajaxResult);

      }

    }

  }

]);

Answer 2

您需要使用$ q.all（...）来处理多个承诺，就像它们是一个承诺一样。

在您的工厂中，返回从ajax调用返回的promise。

在您的控制器中，将从工厂返回的承诺放在范围内。

然后在你的指令中，注入$ q服务并包装在$ q.when（...）。然后（...）调用中传递的promise，将then（）返回的promise添加到数组中

将数组包装在$ q.all（...）中，以便将所有承诺解析为一个。

指令代码如下所示：

app.directive('directive1',
    function($q){  
        return{
            scope: {
                promise1:'=',
                promise2:'='
          },
          link: function(scope, element, attrs){
              var allPromises = [];
              allPromises.push($q.when(promise1).then(function(value1) {scope.value1 = value1 });
              allPromises.push($q.when(promise2).then(function(value2) {scope.value2 = value2 });

              $q.all(allPromises).then(function() {
                  // code that uses scope.value1 and scope.value2
              });
          }
        }
      }
    ]);

您不必担心$ q.when（...）部分，但使用它将确保当范围上的值不是承诺时，您的指令可以重复使用。

如何设置依赖于通过ajax加载的共享对象的角度指令？

2 个答案: