一尘不染

AngularJS:将所需的指令控制器注入控制器,而不是链接函数

angularjs

正常使用案例

如果您有父指令和子指令,则可以在父指令的控制器中创建方法,并在子指令中需要父控制器。Angular会将父控制器传递到您的子指令链接函数中。

我的用例

我有一个用例,其中子指令是另一个指令的父指令。我在中间的指令要求的顶部有on指令。中间的指令是底部的最后一个指令所必需的。

在一个简单的世界中,我可以为中间指令创建一个链接方法和一个控制器。link方法使用顶部控制器处理所有内容,并且将中间控制器传递给bottom指令。

在我的情况下,中间指令的控制器中的方法必须调用父代中的方法,因此我需要中间控制器中的顶级控制器,而不是中间指令的link函数中的!

问题

如何将所需的控制器而不是链接功能注入到控制器中

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

阅读 176

收藏
2020-07-04

共1个答案

一尘不染

实际上,还有另一种方式不太冗长,并且由角度ngModel本身使用

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

基本上,它们使用以下事实:将控制器存储在指令dom元素的data属性中。

仍然有点有线,但是比较冗长,更易于理解。

我看不到为什么不能将所需的控制器传递到指令控制器的注入本地的原因。

2020-07-04