Как дождаться завершения выполнения углового контроллера js - PullRequest
Новая
       33

Как дождаться завершения выполнения углового контроллера js

0 голосов
/ 04 октября 2018

Я создал две угловые службы 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;
}
});

Затем создайте второй сервис для другой цели.После кода для второго сервиса, который я создал.Здесь я пытаюсь сохранить идентификатор электронной почты текущего зарегистрированного пользователя. 

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

Здесь я хочу выполнить mTController после того, как userController полностью выполнен, поскольку данные, передаваемые из userController будет использоваться в mTController для дальнейших операций, а этого не происходит.

В чем может быть проблема?Я погуглил, но не нашел решения.Любая помощь будет заметна.

...