Angular.js - 如何在另一个指令中使用指令？

Question

我想在另一个指令中使用指令。

父指令在其模板中使用子指令。

这是我的代码。

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>'
    }
});

这里是 jsfiddle 链接。

jsfiddle

但是子指令没有显示。

我该怎么办？

Answer 1

您的小提琴中有一些错误。我把它们修好了。

首先在顶部应该是

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

接下来，在 myNode 指令中应该是

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

之后，我在两个指令配置中都添加了替换。

更新小提琴：http://jsfiddle.net/vNF9L/

现在，什么都没有显示，但是如果您检查 dom，您会看到所有内容都按照您想要的方式输出。