Question

以下代码来自angular-ui入门页面：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');
  };
};

Answer 1

我相信之前已经在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！

如何将API服务注入ModalInstanceCtrl函数

1 个答案: