Question

我正在使用UI Bootstrap的$uibModal来创建模态。我也在使用UI路由器0.2.15，所以我想要的是一个以新模态打开的状态。

这就是我的配置功能：

    $stateProvider
    .state("mystate.substate1", {
        url: '...',
        template: '<div ui-view></div>',
        onEnter: showFirstCustomModal
    })
    .state("mystate.substate2", {
        url: '...',
        onEnter: showSecondCustomModal
    });

    // End of calling code

    function showFirstCustomModal($uibModal) {

        var options = {
            backdrop: 'static',
            templateUrl: '...',
            controller: 'Controller1',
            controllerAs: 'controller'
        };

        $uibModal.open(options);
    }

    function showSecondCustomModal($uibModal) {

        var options = {
            backdrop: 'static',
            templateUrl: '...',
            controller: 'Controller2',
        };

        $uibModal.open(options);
    }

上面的两种模态方法非常相似。我想用通用方法替换它们：

    $stateProvider
    .state("mystate.substate1", {
        url: '...',
        onEnter: showGenericModal('some_template','SomeController1', 'alias1')
    })
    .state("mystate.substate2", {
        url: '...',
        onEnter: showGenericModal('some_other_template', 'SomeController2')
    });

    // End of calling code

    function showGenericModal(templateUrl, controller, controllerAlias, $uibModal) {

        var options = {
            backdrop: 'static',
            templateUrl: templateUrl,
            controller: controller
        };

        if(!!controllerAlias) {
            options.controllerAs: controllerAlias;
        }

        $uibModal.open(options);
    }

我将$uibModal作为最后一个参数，以避免重新分配。但我不能让这个工作。我得到的错误是

 Cannot read property 'open' of undefined

另外，我一直在阅读this，我知道你必须使用$ injector才能注入你的服务。但我认为这已经由UI-Bootstrap处理了。

Answer 1

由于$stateProvider块中定义了config，因此$uibModal无法作为参考从那里传递。

无法在Angular DI中混合依赖项和普通参数。对于onEnter，它应该是一个接受依赖列表的函数。

上面的代码转换为：

onEnter: showGenericModal('some_other_template', 'SomeController2')

...

function showGenericModal(templateUrl, controller, controllerAlias) {
  return ['$uibModal', function ($uibModal) {
    ...
    $uibModal.open(options);
  }];
}

或者更好的方法：

onEnter: function (genericModal) {
  genericModal.show('some_other_template', 'SomeController2');
}

...

app.service('genericModal', function ($uibModal) {
  this.show = function (templateUrl, controller, controllerAlias) {
    ...
    $uibModal.open(options);
  }
});

Answer 2

@estus回答正确，我不知道我是如何看到状态的：＆＃34;对于onEnter，它应该是一个接受依赖列表的函数。＆＃34;。< / p>

但是，我会在这里给出答案，以提供另一种观点。您可以定义一个服务来包装和正确组织您的代码，以便在{{ event.endTime.diff(event.startTime)|date("%i'%s''") }}州事件上调用自定义模式：

onEnter

关于州定义：

angular.module('app').service('AppModals', AppModals);

// or use /** @ngInject */ aswell
AppModals.$inject = ['$uibModal'];

function AppModals($uibModal) {
    this.open = function _generateModal(options) {
        var defaultOptions = {
            backdrop: 'static'
            // Any other default option
        };

        return $uibModal.open(angular.extend({}, defaultOptions, options);
    };
}

是否可以在AngularJS中将注入的依赖项与自定义参数混合使用？

2 个答案: