angular-ui bootstrap $ modal service using using

Question

我看到使用angular-ui/bootstrap的例子$modal看起来总是这样:

    $modal.open({
        templateUrl: 'modaltemplate.html',
        controller: function($scope) {
            ...
        }
    });

如果我想使用指令怎么办？像这样:

    $modal.open({
        template: '<my-modal-directive></my-modal-directive>'
        // no "controller" property; use directive's controller
    });

my-modal-directive渲染的标记很好,我已将controller属性移动到my-modal-directive定义对象中,但现在从以下内容中获取此错误my-modal-directive:

Error: [$injector:unpr] Unknown provider: $modalInstanceProvider <- $modalInstance

任何人都可以指向一个$modal使用指令定义的指令的例子controller吗？

例如,这有效,我templateUrl用一个指令替换了:

http://plnkr.co/edit/YrGaF83GH6bzZPRR55GK?p=preview

但是当我将控制器移动$modal.open()到指令中时,就会发生错误:

http://plnkr.co/edit/aLBT239EpL004DRh4jll?p=preview

Answer 1

问题是$modalInstance只能在你提供的控制器中注入$modal.open.看看这里的消息来源:

$modal.open = function (modalOptions) {
    ...
    var modalInstance = {
        ...
    };
    ...
    if (modalOptions.controller) {
        ...
        ctrlLocals.$modalInstance = modalInstance;
        ...
        ctrlInstance = $controller(modalOptions.controller, ctrlLocals);
        ...
    }
    ...
}

本质上,当您尝试$modalInstance作为依赖项添加到控制器时,AngularJS会查找名为的已注册全局提供程序$modalInstanceProvider.现在的问题是,如果你理解上面的代码,这$modalInstance是不是一个全球的注册供应商.它只是"存在"作为您传递给控制器​​的依赖项$modal.open.

如果您阅读其余代码,您会注意到$modal.open返回modalInstance,也许您可​​以使用它.

像这样的东西:

function SomeController($modal) {
    $scope.modal = {
        instance: null
    };

    $scope.modal.instance = $modal.open({
        template: '<my-modal-directive modal="modal"></my-modal-directive>',
        scope: $scope
    });
}

function MyModalDirective() {
    scope: {
        modal: '='
    },
    link: function($scope) {
         // here you can access $scope.modal.instance
    }
} 

Answer 2

您遇到的问题是您正在尝试注入无法注入的值.只能注入注射器注册的值.

您的代码逻辑也有缺陷,您在主控制器中创建模态但尝试在指令中关闭它.理想情况下,模态应该由指令触发(通过它的链接功能),然后你可以从那里确定/取消它.

有关一种可能的方法,请参阅我的http://plnkr.co/edit/3p1rXAymd7BilyklgxKy?p=preview,我保留了关闭的代码并取消了主控制器中的模态.

    angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').directive('myModal', function() {
    return {
        restrict: 'E',
        templateUrl: 'myModalContent.html',
        controller: function ($scope) {
          $scope.selected = {
            item: $scope.items[0] 
          };
        }
    };
});
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {

  $scope.items = ['item1', 'item2', 'item3'];

  $scope.open = function (size) {
    var modalInstance;
    var modalScope = $scope.$new();
    modalScope.ok = function () {
            modalInstance.close(modalScope.selected);
    };
    modalScope.cancel = function () {
            modalInstance.dismiss('cancel');
    };      

    modalInstance = $modal.open({
      template: '<my-modal></my-modal>',
      size: size,
      scope: modalScope
      }
    );

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