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

Question

我正在使用 UI Bootstrap 的 $uibModal 创建模态。我也在使用 UI Router 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 才能注入(inject)您的服务。但我认为这已经由 UI-Bootstrap 处理了。

Answer 1

由于 $stateProvider 是在 config block 中定义的，因此 $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);
  }
});