Angularjs:将所需的指令控制器注入控制器而不是链接函数 [英] Angularjs: inject required directive-controller into the controller instead of the link function

问题描述

angular 中的正常用例

如果您有父指令和子指令，则在父指令的控制器中创建方法并在子指令中要求父控制器.Angular 会将父控制器传递给您的子指令链接函数.

If you have a parent directive and a child directive you create methods in the controller of the parent directive and require the parent controller in your child directive. Angular will pass the parent controller into your child directives link function.

我的用例

我有一个用例，其中子指令是另一个指令的父指令.我在顶部有指令，这是中间指令所要求的.底部的最后一个指令需要中间指令.

I have a use case where the child directive is a parent for another directive. I have on directive on the top that is required by the directive in the middle. The middle directive is required by the last directive at the bottom.

在一个简单的世界中，我可以为中间指令创建一个链接方法和一个控制器.link 方法处理顶部控制器的所有内容，中间控制器传递给底部指令.

In an easy world I could just create a link method and a controller for the middle directive. The link method handles everything with the top controller and the middle controller is passed to the bottom directive.

在我的例子中，中间指令的控制器中的方法必须调用父级中的方法，所以我需要中间控制器中的顶部控制器，而不是中间指令的链接函数！

In my case the methods in the controller of the middle directive must call methods in the parent so I need the top-controller in the middle-controller and not in the link function of the middle directive!

问题

如何将所需的控制器注入控制器而不是链接函数

How can I inject required controller into the controller instead of the link function

angular.module('app').directive('top', function () {
    return {
        $scope: true,
        templateUrl: "top.html",
        controller: function() {
            this.topMethod = function() {
                // do something on top
            }
        }
    }
});

angular.module('app').directive('middle', function () {
    return {
        $scope: true,
        templateUrl: "middle.html",
        require: "^top",
        controller: function($scope, $attrs, topController) {
            this.middleMethod = function() {
                // do something in the middle

                // call something in top controller, this is the part that makes everything so complicated
                topController.topMethod();
            }
        }
    }
});

angular.module('app').directive('bottom', function () {
    return {
        $scope: true,
        templateUrl: "bottom.html",
        require: "^middle",
        link: function(scope, element, attrs, middleController) {
            $scope.bottomMethod = function() {
                // do something at the bottom

                // call something in the parent controller
                middleController.middleMethod();
            }
        }
    }
});

推荐答案

其实还有另一种方式，不那么冗长，由angular ngModel本身使用:

Actually there is another way that is less verbose and is used by the angular ngModel itself:

var parentForm = $element.inheritedData('$formController') || ....

基本上他们使用这样一个事实，即控制器存储在指令 dom 元素的 data 属性中.

Basically they use the fact that the controllers are stored into the data property of the directive dom element.

仍然有点有线，但不那么冗长且更容易理解.

Still a bit wired, but less verbose and easier to understand.

我不明白为什么您不能将所需的控制器传递到指令控制器的注入本地.

I don't see a reason why you cannot pass the required controllers into the injection locals for the directive controller.

这篇关于Angularjs:将所需的指令控制器注入控制器而不是链接函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！