如何等待直到Angular JS控制器执行完成

时间:2018-10-04 11:53:35

标签: angularjs angularjs-controller csom sharepoint-list

我创建了两个angular js服务,如下所示:-

var app = angular.module("myApp",[]);
app.service('myServices',function(){
   var officeMasterData;
   //In this function I fetch the sharepoint list as try to store the data in this service.
   this.getDataFromSharepoint = function(){
      var deferred = $.Deferred();
      var context = new SP.ClientContext('siteUrl');
      .......
      context.executeQueryAsync(function(){
        var listItemEnumerator = colListItem.getEnumerator();
        officeMasterData = listItemEnumerator;
        return deferredA.resolve(listItemEnumerator);
      },function(error){
        return deferred.reject(error)
      });
     return deferred.promise();
   }

// Another function in the service to get the data which is already stored from the function above.

this.getDataSaved = function(){
   return officeMasterData;
}
});

然后出于其他目的创建第二个服务。 按照我创建的第二项服务的代码。 在这里,我尝试存储当前已登录用户的电子邮件ID。

app.service('userServices',function(){
     var userArray = {};
     this.getCurrentUserDetails = function(){
       var deferred = $.Deferred();
        var context = new SP.ClientContext.get_current();
        var web = context.get_web();
        currentUser = web.get_currentUser();
        context.load(currentUser);
        context.executeQueryAsync(function(){
           userArray['id'] = currentUser.get_email();
           return deferred.resolve(userArray['id']);
        },function(error){
           return deferred.reject(error);
        });
       return deferred.promise();
     }

    this.getOtherDetails = function(a){
       //gets data from another list based on the email Id that has been generated and appends new data to the array.
      ..........
      context.executeQueryAsync(function(){
         userArray['First'] = 'Some';
         userArray['Last'] = 'thing';
         return deferred.resolve(userArray);
       },function(error){
         return deferred.reject(error);
       });
      return deferred.promise();
    }

  this.getMyDetails = function(){
    return userArray;
  }

});

然后,我创建了两个控制器,它们将按以下方式使用服务:-

angular.module('myApp').controller('userController',userController);
userController.$inject = ['$scope','userServices'];
function userController($scope,userServices){
    var alreadySavedData = userServices.getMyDetails();
        if(alreadySavedData['First_Name'] === undefined){
            var getCurrent = userServices.getCurrentUserDetails();
            var getFurtherCurrent = getCurrent.then(function(res){
                return userServices.getOtherDetails(res)
            });
            getFurtherCurrent.then(function(resArr){
                $scope.UserDetails = resArr;
                $scope.$apply();
            });
        }else{
            var getCurrent = userServices.getMyDetails();
                $scope.getCurrent = resArr;
                $scope.$apply();
        }
}

这是另一个控制器的代码。

angular.module('myApp').controller('myTController',myTController);
myTController.$inject = ['$scope','myServices','userServices'];
function mTController($scope,myServices,userServices){
      var userDetails = userServices.getMyDetails();
      var myData = myServices.getDataFromSharepoint();
}

以下是参考的HTML代码:-

<body data-ng-app="myApp">
<div id="main_header" ng-controller="userController as user">
 <div id="header_inner1">
    <div class="mobile_menu">
        <div class="ham1"></div>
        <div class="ham2"></div>
        <div class="ham3"></div>                
    </div> 
    <div id="logo">
        <img src="images/myImg.png" alt="imgLogo"/>
    </div>
 </div>
</div>
 <div ng-controller="mTController" id="myTC" style="display:none;margin-top:10px;">
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>First Name</th>     
                <th>Last Name</th>
                <th>Company Name</th>
            </tr>
        </thead>
        <tr ng-repeat="tr in offices">
            <td data-ng-cloak>{{tr.ID}}</td>
            <td data-ng-cloak>{{tr.First_x0020_Name}}</td>
            <td data-ng-cloak>{{tr.Last_x0020_Name}}</td>
            <td data-ng-cloak>{{tr.Company_x0020_Name}}</td>        
        </tr>
    </table>
 </div>

<script src="js/userController.js"></script>
<script src="js/officeController.js"></script>
</body>

这里的问题是我的 mTController userController

之前执行了

这里,我要在完全执行 userController 后执行 mTController ,因为从 userController 传递的数据将用于 mTController 进行进一步的操作,并没有发生。

可能是什么问题? 我到处搜寻,但找不到任何解决方案。 任何帮助都是可观的。

0 个答案:

没有答案