Call-Service-Funktion in der Komponente Winkel

Question

Ich arbeite derzeit mit Winkelmodal und wurde mit einem Problem festgefahren. on alertOnEventClick Ich öffne ComponentModal. In ModalInstanceCtrl und Komponente I haben Schaltflächen 'Ok' und 'Abbrechen', aber ich möchte eine weitere hinzufügen, die Reservierung löscht. Allerdings kann ich UniversalService nicht so wie in der Komponente aufrufen, weil es nicht definiert ist. Ich weiß auch nicht, wie ich es definieren soll. Kennt jemand einen Weg?

(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'}); 
     }; 
     } 
    }); 

Answer 1

Der Grund dafür ist, haben Sie nicht UniversalService innerhalb Komponente controller Funktion, Sie müssen immer darauf achten, bevor sie eine injectable verwenden sollte, hier in diesem Fall innerhalb einer Fabrik Funktion injiziert werden Sie es in modalComponent injizieren sollte Komponentencontroller.

-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 
    }] 
} 

Answer 2

Sie können Service wie diese machen:

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