Question

我有几个嵌套指令。我试图保持一致并使用controllerAs语法。但我正在努力寻找一种干净的方式让孩子们调用父方法，这些方法不包括父母在其范围内放置看似随机的函数。

angular.module('app', [])

.directive('parent', function(){
    return {
        restrict: 'EA',
        controller: 'ParentController',
        controllerAs: 'parentCtrl',
    }
})
.directive('child', function(){
    return {
        restrict: 'EA',
        require: '^parent',
        controller: 'ChildController',
        controllerAs: 'childCtrl'
    }
})
.controller('ParentController', function($scope){
    var ctrl = this;

    ctrl.type = "hot";
    ctrl.nonInheritedFunction = nonInheritedFunction;
    $scope.inheritedFunction = inheritedFunction; // <-- trying to avoid this

    function nonInheritedFunction(type){
        ctrl.type = type;
        if(ctrl.type == 'cold'){
            //... do some Parent related things
        }
    }
    function inheritedFunction(type){
        // to illustrate that it does the same thing. Not a solution
        ctrl.nonInheritedFunction(type);
    }
})
.controller('ChildController', function($scope){
    var ctrl = this;

    ctrl.doAction = doAction;

    function doAction(action){
        if(action == 'flip_temperature'){
            // bah
            $scope.parentCtrl.nonInheritedFunction('hot');

            // much cleaner feeling
            $scope.inheritedFunction('hot');

            // wishing I could do something like
            // ctrl.nonInheritedFunction('hot');
        }
    }

    /**
    * template has access to type through `parentCtrl.type`
    * and the function through `parentCtrl.nonInheritedFunction`
    *
    * The only access the ChildController has is `$scope.parentCtrl.type`
    * Is there a way to keep $scope out of the equation?
    */

})

Answer 1

在您的父指令中输入 transclude：true ，并在parent的link函数中手动传递transclude函数中的范围。假设，如果指令创建隔离范围，则transcluded范围现在是隔离范围的子代。被抄袭和隔离的范围不再是兄弟姐妹。 transcluded范围的$ parent属性现在引用了隔离范围。

Answer 2

在角度＆gt; 1.3，您可以使用bindToController将范围变量附加到控制器。

假设您有一个父级函数绑定到范围

scope: {
  onSomethingHappen: '&parentFunction'
},
controller: 'DirectiveController',
controllerAs: 'vm',
bindToController: true

您可以在控制器上致电：this.onSomethingHappen()

Answer 3

您必须使用嵌套的子和父指令，以便可以访问外部控制器。

 <parent >
<child >

</child></parent>

使用指令中的controllerAs语法访问父方法

3 个答案: