how to restrict asynchronous call in angularjs?

Question

This is my code

 .state('appSetting', { abstract: true, url: '/appSetting/:appId', templateUrl: appUrl + '/AppSetting/Index', controller: 'AppSettingCtrl' }) .state('appSetting.majorObjectList', { url: '/majorObject', templateUrl: appUrl + '/MajorObject/List', controller: 'MajorObjectsCtrl' }) MajorObjectsCtrl = [ '$scope', '$state', 'uiGridConstants', '$stateParams', '$rootScope', 'dataFactory', 'cacheKeys', '$window', 'ngDialog', '$filter', function ($scope, $state, uiGridConstants, $stateParams, $rootScope, dataFactory, cacheKeys, $window, ngDialog, $filter) { "use strict"; $scope.loadMajorObjects = function () { $scope.getData(); $scope.objectsList.data = $scope.filterData; }; }]; AppSettingCtrl = [ '$scope', '$state', '$stateParams', '$window', '$sessionStorage', 'dataFactory', 'ngDialog', '$q', function ($scope, $state, $stateParams, $window, $sessionStorage, dataFactory, ngDialog, $q) { "use strict"; $scope.getData = function () { var appId = $scope.currentAppId; var type = $scope.majorObject.type; if (_.isEmpty(appId)) { return; } var deferred = $q.defer(); // var cacheKey = { key: cacheKeys.objectTypeList($scope.asCacheOptions({ ObjectType: type })) }; dataFactory.get("/MajorObject/All?applicationId=" + $scope.currentAppId + "&type=" + type) .then(function (result) { $scope.selectAppSetting('Major Objects'); $scope.filterData = result.data.data; deferred.resolve($scope.filterData); }); return deferred.promise; }; }]; 

  <div ng-controller="AppSettingCtrl" class="row appReady"> @RenderPage("_TopNavBar.cshtml") <button id="myCheck" ng-click="showSearchPopUp()" class="btn btn-primary"><i class="fa fa-plus"> <span>Search</span> </i> </button> </div> 

In the above code call getData() from majorObjectCtrl . After the controll goes to appSettingCtrl getData() function then immediately transfer to majorObjectCtrl , next load data from services in appSettingCtrl . But after load data from services i want to transfer to majorObjectCtrl

Answer 1

You should be returning the promise from getData . Then in loadMajorObjects , you can chain it with .then to utilize the $scope.filterData .

Here is an improvement of getData .

$scope.getData = function () {
      var appId = $scope.currentAppId;
      var type = $scope.majorObject.type;
      if (_.isEmpty(appId)) {
          return $q.when();
      }
      //   var cacheKey = { key: cacheKeys.objectTypeList($scope.asCacheOptions({ ObjectType: type })) };
      dataFactory.get("/MajorObject/All?applicationId=" + $scope.currentAppId + "&type=" + type)
             .then(function (result) {
                 $scope.selectAppSetting('Major Objects');
                 return result.data.data;
             });
  };

and loadMajorObjects :

  $scope.loadMajorObjects = function () {
      $scope.getData().then(function(filterData) {
           $scope.objectsList.data = filterData;
      });
  };

Answer 2

$scope.loadMajorObjects = function () {
    $scope.getData().then(function (result) {
        $scope.objectsList.data = result;
    });
};