Angularjs 带动态参数的动态控制器

Question

我在我的项目中使用了 requirejs、angularamd 和 ui.bootstrap。在弹出窗体的情况下，我有来自 ui.bootstrap 的 $uibModal。但是我无法从解析中传递参数 "items"。如何为已动态解析的控制器注入参数？

function open(size, parentSelector) {
        var parentElem = parentSelector ?
          angular.element($document[0].querySelector('.grid ' + parentSelector)) : undefined;

        var modalInstance = $uibModal.open({
            animation: vm.animationsEnabled,
            ariaLabelledBy: 'modal-title',
            ariaDescribedBy: 'modal-body',
            size: size,
            appendTo: parentElem,
            templateUrl: 'Views/Shared/ColSetting.html',
            resolve: {
                load: ['$q','$rootScope',function ($q, $rootScope) {
                    var loadController = "Views/Shared/ColSettingController";
                    var deferred = $q.defer();
                    require([loadController], function () {
                        deferred.resolve(items);
                        $rootScope.$apply();
                    });
                    return deferred.promise;
                }]
            }
        });

这是我要调用的控制器。

'use strict';

define(['application-configuration', 'ajaxService'], function (app) {
function ColSettingController(items) {
    var vm = this;

    //vm.content = $rootScope.content;

    vm.ok = function () {
        //$uibModalInstance.close(vm.selected.item);
    };

    vm.cancel = function () {
        //$uibModalInstance.dismiss('cancel');
    };
}

app.register.controller("ColSettingController", ColSettingController);
});

Answer 1

根据ui.bootstrap，resolve 属性是一个地图对象。地图对象包含 key/value 对：

key - {string}：要注入控制器的依赖项的名称。
工厂 - {string|function}: 如果 string，则它是服务的别名。否则如果 function，则它被注入并且 return 值被视为依赖项。如果结果是一个 promise，它会在控制器被实例化并将它的值注入到控制器之前被解决。

在你的例子中，你使用的是 load，但是你的控制器期望注入 items，我假设它没有说它找不到 items，对吧？因为你注入的是load.

您需要在 resolve、load 中将属性的名称更改为 items。

resolve: {
    //change 'load' for 'items' here
    items: [....rest of your code goes here....]

此外，建议在声明 controllers/components 等之前使用属性 $inject，例如：

function ColSettingController(items) {
    //some code here
}

ColSettingController.$inject = ['items'];

app.register.controller("ColSettingController", ColSettingController);

希望对您有所帮助

Angularjs 带动态参数的动态控制器

Angularjs Dynamic Controller with Dynamic Parameter

javascript

requirejs

angularjs