Блог

Следующий код взят прямо со страницы angular-ui getting started:http://angular-ui.github.io/bootstrap/#/getting_started. Я изменил ее для входа в модальный режим и хотел бы вызвать API, который авторизует пользователя, прежде чем диалоговое окно будет закрыто.

 var ModalDemoCtrl = function ($scope, $modal, $log) {
  $scope.items = ['item1', 'item2', 'item3'];
  $scope.open = function (size) {
 var modalInstance = $modal.open({
   templateUrl: 'myModalContent.html',
   controller: ModalInstanceCtrl,
   size: size,
   resolve: {
  items: function () {
    return $scope.items;
  }
   }
 });

 modalInstance.result.then(function (selectedItem) {
   $scope.selected = selectedItem;
 }, function () {
   $log.info('Modal dismissed at: '   new Date());
 });
  };
};

// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.
  

Вот где я хотел бы иметь возможность вызывать службу. Но я не смог заставить функцию получать доступ ко всему, что у меня есть, что является внешним по отношению к ней. Кажется, что она распознает объекты (следовательно, элементы), но если я внедряю службу в ModalDemoCtrl, я получаю неопределенную ошибку при попытке получить к ней доступ.

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

Я полагаю, что на этот вопрос был дан ответ ранее где-то в Stack, но еще лучше вот Plunkr для конкретного примера:

http://plnkr.co/edit/4GcKLz?p=preview

 angular.module('app', ['ui.bootstrap']).
service('DataService', ['$rootScope',
  function($rootScope) {
    this.data = {};
    this.data.message = 'This is a message from a service';
    this.data.items = ['item1', 'item2', 'item3'];
  }
]).
controller('myModal', ['$scope', '$modalInstance', 'DataService',
  function($scope, $modalInstance, dataService) {
    $scope.data = dataService.data;
    $scope.message = dataService.data.message;
    $scope.items = dataService.data.items;

    $scope.selected = {
      item: $scope.items[0]
    };

    $scope.ok = function() {
      $modalInstance.close($scope.selected.item);
    };

    $scope.cancel = function() {
      $modalInstance.dismiss('cancel');
    };

  }
]).
controller('appController', ['$scope', '$modal', '$log', 'DataService',
  function($scope, $modal, $log, dataService) {

    $scope.data = dataService.data;

    $scope.showModal = function() {
      var modalInstance = $modal.open({
        templateUrl: 'myModalContent.html',
        controller: 'myModal'
      });

      modalInstance.result.then(function(selectedItem) {
        $scope.selected = selectedItem;
      }, function() {
        $log.info('Modal dismissed at: '   new Date());
      });

    };

  }
]);
  

HTH!