CODEWITHSUNDEEP
angularjsmodal-dialogbootstrap-modal
user122222
user122222

Reputation: 2419

Call service function in component angular

I am working with angular modal currently and been stuck with a problem. on alertOnEventClick I open ComponentModal. In ModalInstanceCtrl and component I have buttons 'Ok' and 'Cancel' but I want to add one more which deletes reservation. However I can't call UniversalService like that in component because it is not defined. I don't know how to define it either. Does anyone know a way?

(function () {
'use strict';

angular.module('app').controller('MainController', MainController);

MainController.$inject = ['$location',  'UniversalService', '$scope', '$sce', '$rootScope','$mdDialog','$cookies', '$window','$compile','uiCalendarConfig','$timeout','$uibModal'];
function MainController($location, UniversalService, $scope, $sce, $rootScope,$mdDialog,$cookies, $window,$compile,uiCalendarConfig,$timeout,$uibModal) {

       $scope.alertOnEventClick = function( obj, jsEvent, view){

          $scope.openComponentModal();
       };

       var $ctrl = this;
       $ctrl.items = ['item1', 'item2', 'item3'];
       $ctrl.animationsEnabled = true;

       $scope.openComponentModal = function () {
         var modalInstance = $uibModal.open({
           animation: $ctrl.animationsEnabled,
           component: 'modalComponent',
           resolve: {
             items: function () {debugger;
               return $rootScope.Info;
             }
           }
         });
         modalInstance.result.then(function (selectedItem) {
           $ctrl.selected = selectedItem;
         }, function () {
           console.log("dsfdgb");
         });
       };




}

})();

    angular.module('app').controller('ModalInstanceCtrl', function ($uibModalInstance, items,UniversalService) {
      var $ctrl = this;
      $ctrl.items = items;
      $ctrl.selected = {
        item: $ctrl.items[0]
      };

      $ctrl.ok = function () {
        $uibModalInstance.close($ctrl.selected.item);
      };

      $ctrl.deleteReservation=function(){
          UniversalService.RemoveReservation($ctrl.items.id);debugger;
      }

      $ctrl.cancel = function () {
        $uibModalInstance.dismiss('cancel');
      };
    });


    angular.module('app').component('modalComponent', {
      templateUrl: 'myModalContent.html',
      bindings: {
        resolve: '<',
        close: '&',
        dismiss: '&'
      },
      controller: function () {
        var $ctrl = this;

        $ctrl.$onInit = function () {
          $ctrl.items = $ctrl.resolve.items; console.log($ctrl.items);debugger;
          $ctrl.selected = {
            item: $ctrl.items[0]
          };debugger;
        };

        $ctrl.ok = function () {
          $ctrl.close({$value: $ctrl.selected.item});
        };

        $ctrl.deleteReservation=function(){
            UniversalService.RemoveReservation($ctrl.items.id);debugger;
        }

        $ctrl.cancel = function () {
          $ctrl.dismiss({$value: 'cancel'});
        };
      }
    });

Upvotes: 1

Views: 1567

Answers (2)

Wasif Khan
Wasif Khan

Reputation: 954

You can make service like this:

angular.module('app').service('UniversalService',function(){
    function RemoveReservation(){
         // Your code
    }
});

Upvotes: 1

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

The reason is, you haven't UniversalService inside component controller function, You always have to make sure before using any injectable it should be injected inside a factory function, here in this case you should inject it in modalComponent component controller.

Code

angular.module('app').component('modalComponent', {
  templateUrl: 'myModalContent.html',
  bindings: {
    resolve: '<',
    close: '&',
    dismiss: '&'
  },
  //injected `UniversalService` inside component controller factory function.
  controller: ['UniversalService', function (UniversalService) {
     //all your code as is
  }]
}

Upvotes: 1

Related Questions