使用动态控制器将解析注入指令答案

【问题标题】：Injecting resolve into directive with dynamic controller使用动态控制器将解析注入指令
【发布时间】：2015-05-30 04:08:59
【问题描述】：

我有一个动态控制器指令，它通过控制器名称属性传递。

指令：

angular
        .module('directives.panel', [])
        .directive('panel', panel);

panel.$inject = ['$timeout', '$parse'];

        function panel($timeout, $parse) {

            var directive = {
                restrict: 'EA',
                transclude: true,
                replace: true,
                template: '<div class="panel panel-solid panel-table" ng-transclude></div>',
                controller: '@',
                name: 'controllerName',
                controllerAs: 'panel',
                link: linkFunc
            };

            return directive;

            }
        }

是否可以将解析“任务簿”对象注入动态控制器？当我尝试这样做时，我得到了未知的提供者。但是注入资源服务（GroupResource）工作正常。

是否可以在指令控制器中注入解析？

州

angular
        .module('taskbooks.taskbook', [
            'deployment.group',
            'resource.deployment',
            'resource.taskbook'
        ])
        .config(TaskbookConfig)
        .controller('TaskbookController', TaskbookController);

    TaskbookConfig.$inject = ['$stateProvider', '$provide'];

    function TaskbookConfig($stateProvider) {

        $stateProvider
            .state('taskbooks.taskbook', {
                url: 'taskbooks/:taskbookId',
                parent: 'taskbooks',
                views: {
                    "mainContent@taskbooks": {
                        controller: 'TaskbookController as taskbook',
                        templateUrl: 'taskbook/taskbook.tpl.html'
                    }
                },
                resolve: {
                    taskbook: TaskbookPrepare
                }
            });
    }

    TaskbookPrepare.$inject = ['$stateParams', 'TaskbookResource'];

    function TaskbookPrepare($stateParams, TaskbookResource) {

        return TaskbookResource.get({
            taskbookId: $stateParams.taskbookId
        }).$promise;
    }

指令控制器

angular
       .module('deployment.groups', ['resource.group'])
       .controller('DeploymentGroupController',DeploymentGroupController);

      DeploymentGroupController.$inject = ['$scope', '$element', '$attrs', 'GroupResource', 'taskbook']; 
      function DeploymentGroupController($scope, $element, $attrs, GroupResource, taskbook)  {

       }

【问题讨论】：

标签： angularjs angularjs-directive angular-ui-router

【解决方案1】：

有点...如果此指令需要与此状态关联的解析，那么可以肯定地假设它只会在此状态下使用，对吗？

按照这个想法，指令可以引用状态中设置的控制器，您可以将解析添加到控制器范围。

这是我所说的非常简化的版本...

angular
    .module('taskbooks.taskbook')
    .config([ $stateProvider, function ($stateProvider) {

        $stateProvider
            .state('taskbook', {
                url: '/:id',
                parent: 'taskbooks',
                resolve: {
                    taskbook: [ '$stateParams', 'TaskbookResource', function ($stateParams, TaskbookResource) {
                        return TaskbookResource.get({
                            taskbookId: $stateParams.taskbookId
                        }).$promise;
                    }]
                },
                controller: ['taskbook', function (taskbook) {
                    this.taskbook = taskbook;
                }],
                controllerAs: 'taskController'
            });

    }])
    .directive('someDirective', function() {
        return {
            restrict: 'EAC',
            controller: 'taskController',
            link: function (scope, el, attr, ctrl) {
                var taskbook = ctrl.taskbook;
            }
        }
    });

请注意，我从您的代码中删除了很多不相关的代码，只是为了更快地理解这一点。显然，这可以改写为您编写的结构。

【讨论】：