CODEWITHSUNDEEP
angularjs
texas697
texas697

Reputation: 6397

How to make a service call with a Angular-ui modal instance

I am switching to a Angular-ui modal and I am confused on how to make a $http get call and return the results. I have been using a different angular modal with the current code. I understand ow this is working but I need some help on the transition. thanks This is the modal I am currently using. this works fine. I need to apply this to the Angular-UI modal

$scope.editCivilCaseModal = function (id) {
      var deferred = $q.defer();
      $http({ method: 'get', url: '/api/apiCivilCase/' + id })
              .success(function (civilCase) {
                  deferred.resolve(civilCase);
                  console.log(civilCase);
                  $scope.active = civilCase;
                  $scope.openEditCivilCaseModal = $ekathuwa.modal({
                      scope: $scope,
                      contentPreSize: "lg",
                      templateURL: "views/modals/editCivilCaseModal.html"

                  });
                  //show modal window
                  $scope.openEditCivilCaseModal.then(function (m) {
                      m.modal('show');
                  });
              }).error(function (error) {
                  deferred.reject(error);
              });
      return deferred.promise;
  }

need to switch to this

  .controller('ModalDemoCtrl', function ($scope, $modal, $log) {
  $scope.items = ["item1", "item2", "item3"];

  $scope.open = function (id) {
    var modalInstance = $modal.open({
        templateUrl: "views/modals/editCivilCaseModal.html",
        controller: 'ModalInstanceCtrl',
        resolve: {
            items: function () {
                return $scope.items;
            }
        }
    });
    modalInstance.result.then((function (selectedItem) {
        $scope.selected = selectedItem;
    }), function () {
        $log.info("Modal dismissed at: " + new Date());
    });
  };
 }
   ).controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {
  $scope.items = items;
  $scope.selected = {
    item: $scope.items[0]
  };
  $scope.ok = function () {
    $modalInstance.close($scope.selected.item);
  };
   $scope.cancel = function () {
    $modalInstance.dismiss("cancel");
  };
}

Solution per the suggested solution

  //Edit Civil Modal
$scope.editCivilCaseModal = function (id) {
    var deferred = $q.defer();
    $http({ method: 'get', url: '/api/apiCivilCase/' + id })
            .success(function (civilCase) {
                deferred.resolve(civilCase);
                console.log(civilCase);
                $scope.active = civilCase;
            }).error(function (error) {
                deferred.reject(error);
            }).then(function () {

                $modal.open({
                    templateUrl: "views/modals/editCivilCaseModal.html",
                    controller: 'ModalInstanceCtrl',
                    resolve: {
                        active: function () {
                            return $scope.active;
                        }
                    }
                });

            })
    return deferred.promise;
}


 .controller('ModalInstanceCtrl', function ($scope, $modalInstance, active) {
    $scope.active = active
    $scope.ok = function () {
    $modalInstance.close();
   };
    $scope.cancel = function () {
    $modalInstance.dismiss("cancel");
   };
 });

Upvotes: 0

Views: 1070

Answers (1)

harishr
harishr

Reputation: 18055

you should split your $http call

$scope.editCivilCaseModal = function (id) {
      var deferred = $q.defer();
      $http({ method: 'get', url: '/api/apiCivilCase/' + id })
              .success(function (civilCase) {
                  deferred.resolve(civilCase);
                  console.log(civilCase);
                  $scope.active = civilCase;
              }).error(function (error) {
                  deferred.reject(error);
              });
      return deferred.promise;
  }

and on success of http do whatever you like opening the model.

$scope.editCivilCaseModel().then(function(){

               $scope.openEditCivilCaseModal = $ekathuwa.modal({
                      scope: $scope,
                      contentPreSize: "lg",
                      templateURL: "views/modals/editCivilCaseModal.html"

                  });
                  //show modal window
                  $scope.openEditCivilCaseModal.then(function (m) {
                      m.modal('show');
                  });

})

this is just to give you the concept because I am not able to see the exact relationship between now and expected.

Upvotes: 1

Related Questions