Angular - 在child指令的控制器中获取父指令的控制器（不是链接函数）

Question

我知道如何在子指令的link函数中获取parent的directive控制器。
但是，我宁愿避免使用link函数（和$scope all-together）并将所有代码都放在指令的controller函数下。

angular.directive('parent', function(){
    return {
        templateUrl: '/parent.html',
        scope: true,
        bindToController: true,
        controllerAs: 'parentCtrl',
        controller: function(){
            this.coolFunction = function(){
                console.log('cool');
            }
        }
    }
});

angular.directive('child', function(){
    return {
        templateUrl: '/child.html',
        require: '^parent',
        scope: true,
        bindToController: true,
        controllerAs: 'childCtrl',
        controller: function() {
            // I want to run coolFunction here.
            // How do I do it?
        }
    }
});

任何帮助表示赞赏！

Answer 1

适当的模式是

app.directive('child', function(){
    return {
        templateUrl: '/child.html',
        require: ['child', '^parent'],
        scope: true,
        bindToController: true,
        controllerAs: 'childCtrl',
        controller: function() {
            this.coolFunction = function () {
                this._parent.coolFunction();
            }
        },
        link: function (scope, element, attrs, ctrls) {
            var childCtrl = ctrls[0];
            var parentCtrl = ctrls[1];
            childCtrl._parent = parentCtrl;
        }
    }
});

不好的是_parent正在暴露于使用controllerAs范围，但它很少会成为问题。

请注意，在link将它们粘合在一起之前，您将无法访问子控制器。 只要在子方法中使用父控制器，这就没问题。

Controller提供了查看模型的方法和初始属性（并且它使用控制器AS更清晰），链接粘合东西，这是指令的工作方式。

$scope和link都有其在Angular 1.x中的用途，即使是最新的社区开发也是必不可少的。 由于没有正当理由而放弃它们是过度热心的，可能导致糟糕的设计解决方案。 代码中没有“链接”和“范围”字样无助于使应用程序更容易移植到2.x. 虽然现在学习Angular 2并且为1.x开发适当的习惯。

Answer 2

您可以将'$ element'注入控制器并访问父控制器，如 -

  controller: ($element) ->
    var parentCtrl = $element.parent().controller('parent');
    parentCtrl.coolFunction();
    //..........
    //..........

这可能不是访问“任何”父控制器最透明的方式，因为它需要指令的特定名称，它是jqlite而不是纯Angular。

发现这个线程有用 - 如何通过递归地要求访问父指令的控制器？

编辑：感谢@Dmitry弄清楚角度不需要'.parent'来获得控制器。 更新的代码 -

  controller: ($element) ->
    var parentCtrl = $element.controller('parent');
    parentCtrl.coolFunction();
    //..........

Answer 3

看这里或这里

1. var parentForm = $element.inheritedData('$formController') || ....
2. var parentForm = $element.controller('form')