Question

我知道如何在子指令的directive函数中获取父级link控制器。
但是，我宁愿避免使用link函数（和$scope一起使用）并将所有代码放在指令的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中的用途，即使是最新的社区发展也是必不可少的。由于没有正当理由而放弃它们是过度热心的，可能导致糟糕的设计解决方案。缺少＆＃39;链接＆＃39;和＆＃39;范围＆＃39;代码中的单词不会有助于使应用程序更容易移植到2.x.虽然现在学习Angular 2并为1.x开发适当的习惯。

Answer 2

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

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

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

发现这个帖子很有用 - How to access parent directive's controller by requiring it recursively?

编辑：感谢@Dmitry确定角度不需要'.parent'来获取控制器。更新的代码 -

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

Answer 3

See here或here

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

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

3 个答案: