Angular directives with ^require - access parent scope?

Question

I am trying to figure out how to properly use nested directives with transclusion and ^require in angular. I want to have a outter directive have a variable that gets updated by nested children directives, but I want all of the children to be linked to that variable. I have written a very simple example to demonstrate the problem

JS

(function () {
    'use strict';

    angular
        .module('app')
        .directive('test', test);

    function test() {
        var directive = {
            bindToController: true,
            controller: testController,
            'controllerAs': 'testController',
            scope: {},
            templateUrl: 'scripts/test/test.html',
            transclude: true
        };
        return directive;
    }

    function testController() {
        var self = this;
        self.childCount = 0;

        self.addChild = function addChild(child) {
            self.childCount++;
            child.childNumber = self.childCount;
        }
    }

})();


(function () {
    'use strict';

    angular
        .module('app')
        .directive('child', child);

    function child() {
        var directive = {
            'scope': {},
            'link': link,
            'templateUrl': 'scripts/test/child.html',
            'transclude': true,
            'require': '^test'
        };
        return directive;

        function link(scope, element, attrs, testController) {
            scope.childNumber = null;
            testController.addChild(scope);
        }

    }

})();

Main HTML calls

<test>
    <child></child>
    <child></child>
    <child></child>
</test>

test.html partial

<h1>self.childCount = {{testController.childCount}}</h1>
<div ng-transclude></div>

child.html partial

<h3>I am child {{childNumber}} out of {{testController.childCount}}</h3>

Output (and issue)

self.childCount = 3
I am child 1 out of 
I am child 2 out of 
I am child 3 out of

As you can see, the child.html output does not know how to output {{testController.childCount}}. Any ideas on what is going wrong?

score 0 · Answer 1 · answered Apr 08 '16 at 15:37

0

I don't normally use controllerAs syntax, but maybe try removing 'scope': {} from the child scope. It could be that by creating an isolate scope your child directive doesn't have access to the parent controller scope.

answered Apr 08 '16 at 15:37

Steve Wakeford

331
1
8

I see what you mean Steve, but I am trying to have the child directive have an isolate scope, so that they can know that they are "child 1 out of X" and "child 2 out of X". If I don't have an isolate scope, then that first variable (which I'm calling childNumber in my example) will be attached to the parent scope so all of them will then say "I am child 3 out of 3" – mls3590712 Apr 08 '16 at 16:15
My thought was that the childNumber field is a member on the child scope which inherits prototypically, so each child scope would have its own childNumber field as long as it's declared in the child scope. I might be wrong though. – Steve Wakeford Apr 08 '16 at 18:27

Angular directives with ^require - access parent scope?

1 Answers1