angularjs - 在指令中使用 controllerAs 语法访问父方法

Question

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

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 函数中手动传递范围。
假设，如果指令创建了一个隔离范围，则被嵌入的范围现在是隔离范围的子级。嵌入的和隔离的作用域不再是兄弟作用域。嵌入作用域的 $parent 属性现在引用隔离作用域。