Question

我目前正在使用角度模态并遇到问题。在alertOnEventClick上打开ComponentModal。在ModalInstanceCtrl和组件我有按钮'确定'和'取消'，但我想添加一个删除保留。但是我不能在组件中调用UniversalService，因为它没有定义。我也不知道如何定义它。有谁知道吗？

(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

原因是，你没有UniversalService在组件controller函数中，你必须确保在使用任何injectable之前它应该被注入到工厂函数中，在这种情况下，您应该将其注入modalComponent组件控制器。

<强>代码

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

你可以这样做：

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

在组件角度

2 个答案: