Angularjs：注入所需指令控制器到控制器，而不是链接功能 [英] Angularjs: inject required directive-controller into the controller instead of the link function

问题描述

正常使用情况下角

如果您有家长指导与您共创父指令的控制器方法，并要求你的孩子指令父控制器子指令。角将父控制器传递到你的孩子的指令链接功能。

我的使用案例

我有一个用例，其中儿童指令是另一指令的父母。我对在由中间指令所需的顶端指令。中间指令是由在底部的最后一个指令所需的

在一个简单的世界，我可以只创建一个链接方法和中间指令的控制器。链接方法处理一切与顶部控制器和中间控制器被传递给底部指令

在我的情况下，这些方法在中间指令，所以我需要顶级控制器在中间控制器，而不是在中间指令的链接功能必须调用父方法的控制器！

问题

我怎么能注入所需的控制器到控制器，而不是链接功能

  angular.module（应用）。指令（'顶'，函数（）{
    返回{
        $范围：真，
        templateUrl的top.html
        控制器：功能（）{
            this.topMethod =功能（）{
                //做一些顶级
            }
        }
    }
}）;angular.module（应用）。指令（'中间'，函数（）{
    返回{
        $范围：真，
        templateUrl：middle.html
        要求：^顶，
        控制器：函数（$范围，$ ATTRS，topController）{
            this.middleMethod =功能（）{
                //做一些中间                //调用上面的控制器的东西，这是一个让一切如此复杂的部分
                topController.topMethod（）;
            }
        }
    }
}）;angular.module（应用）。指令（'底'，函数（）{
    返回{
        $范围：真，
        templateUrl的bottom.html
        要求：^中间
        链接：功能（范围，元素，ATTRS，middleController）{
            $ scope.bottomMethod =功能（）{
                //在底部做一些事情                //调用父控制器东西
                middleController.middleMethod（）;
            }
        }
    }
}）;
 

解决方案

其实有另一种方式，是更简洁和<一个href=\"https://github.com/angular/angular.js/blob/adcc5a00bf582d2b291c18e99093bb0854f7217c/src/ng/directive/input.js#L1614\">is用由角ngModel本身：在

  VAR parentForm = $ element.inheritedData（'$的FormController'）|| ....
 

基本上它们使用控制器被存储到指令dom元素的数据属性的事实。

还是有点有线，但更简洁，更容易理解。

我不明白了一个道理，为什么你不能传递所需的控制器进入注射当地人指​​令的控制器。

Normal use cases in 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.

My use case

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.

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!

The Question

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();
            }
        }
    }
});

解决方案

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

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

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屋！