Angular.js - How to use directive in another directive?

Question

I want to use directive in another directive.

The parent directive uses child directive in its template.

Here is my code.

Html

<div ng-app="myApp">
    <div ng-controller="Ctrl">
        <svg>
            <my-line></my-line>
        </svg>
    </div>
</div>

javascript

var myApp = angular.module('myApp',[
    'myController',
    'myDirectives'
]);

//Controller
var myControllers = angular.module('myControllers', []);
myControllers.controller('Ctrl', function($scope){
    $scope.line = [
        { nodeId:'1'},
        { nodeId:'2'},
        { nodeId:'3'}
    ]
});

//Directives
var myDirectives = angular.module('myDirectives',[]);

myDirectives.directive('myLine',function(){
    return {
        restrict: 'E',
        template:
            '<g ng-repeat="node in line">' +
                '<my-node node="{{node}}"></my-node>' + 
            '</g>'
    };
});

myDirectives.directive('myNode',function(){
    return {
        restrict:'E',
        scope:{
            node:'=node'
        },
        template:
            '<text x="0" y="0">{{node.nodeId}</text>'
    }
});

Here is jsfiddle link.

jsfiddle

But the child directive isn't show.

What should I do?

Answer 1

You have some errors in your fiddle. I fixed them up.

First up at the top it should be

var myApp = angular.module('myApp',[
    'myControllers',
    'myDirectives'
]);

Next up, in the myNode directive it should be

'<text x="0" y="0">{{node.nodeId}}</text>'

After that, I added replace to both both directives configurations.

updated fiddle: http://jsfiddle.net/vNF9L/

Now, nothing is displayed, but if you inspect the dom you'll see everything is outputted like how you wanted.