3

I'm trying to use a global function defined in a parent constructor within the directives on the page which will be called recursively. However not able to figure out how to pass it through all the layers cleanly. using the $parent I can pass it through one layer only.. What would be the best way to achieve this?

http://jsfiddle.net/J8tFS/

<div ng-app="myapp">
<div ng-controller="TreeCtrl">
    <tree family="treeFamily"></tree>
</div>

module.controller("TreeCtrl", function($scope) {
$scope.treeFamily = {
    name : "Parent",
    children: [{
        name : "Child1",
        children: [{
            name : "Grandchild1",
            children: []
        },{
            name : "Grandchild2",
            children: []
        },{
            name : "Grandchild3",
            children: []
        }]
    }, {
        name: "Child2",
        children: []
    }]
};
$scope.toUpper = function(strInput) {
     return strInput.toUpperCase();   
}
});

module.directive("tree", function($compile) {
return {
    restrict: "E",
    scope: {family: '='},
    template: 
        '<p>{{ family.name }}</p>'+
        '<p>{{ $parent.toUpper(family.name) }}</p>' +
        '<ul>' + 
            '<li ng-repeat="child in family.children">' + 
                '<tree family="child"></tree>' +
            '</li>' +
        '</ul>',
    compile: function(tElement, tAttr) {
        var contents = tElement.contents().remove();
        var compiledContents;
        return function(scope, iElement, iAttr) {
            if(!compiledContents) {
                compiledContents = $compile(contents);
            }
            compiledContents(scope, function(clone, scope) {
                     iElement.append(clone); 
            });
        };
    }
};

});

1 Answer 1

1

Do you realy need to use isolated scope? If no, just do not use it and get access to everything in parent scopes.

module.directive("tree", function($compile) {
return {
    restrict: "E",
    template: 
        '<p>{{ family.name }}</p>'+
        '<p>{{ $parent.toUpper($parent.family.name) }}</p>' +
        '<ul>' + 
            '<li ng-repeat="child in family.children">' + 
                '<tree family="child"></tree>' +
            '</li>' +
        '</ul>',
    compile: function(tElement, tAttr) {
        var contents = tElement.contents().remove();
        var compiledContents;
        return function(scope, iElement, iAttr) {
            scope.family = scope.$eval(iAttr.family);

            if(!compiledContents) {
                compiledContents = $compile(contents);
            }
            compiledContents(scope, function(clone, scope) {
                     iElement.append(clone); 
            });
        };
    }
};
});

Here is fixed fiddle: http://jsfiddle.net/J8tFS/1/

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.