4

I have a couple nested directives. I'm trying to be consistent and use the controllerAs syntax. But I'm struggling to find a clean way for children to call parent methods that doesn't include a parent putting seemingly random functions on its scope.

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?
    */

})
0

You must use child and parent directives nested, so you can access the outer controller.

 <parent >
<child >

</child></parent>
|improve this answer|||||
0

In angular > 1.3, you're able to use bindToController to attach scope variable to your controller.

Let say you have a parent's function that bind in to scope

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

You're able to call: this.onSomethingHappen() on your controller

|improve this answer|||||
0

put transclude: true in your parent directive and manually pass the scope in the transclude function in your link function of parent. Suppose,if the directive creates an isolate scope, the transcluded scope is now a child of the isolate scope. The transcluded and isolate scopes are no longer siblings. The $parent property of the transcluded scope now references the isolate scope.

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.