Question

指令模板：

    <script type="text/ng-template" id="child-map.html">
        <b ng-click="selectNode(child.id)">{{child.title}}</b>
        <ul ng-if="child.children.length">
            <li ng-repeat="child in child.children" ng-include="clild-map.html"></li>
        </ul>
    </script>
    <b ng-click="selectNode(mapData.id)">{{mapData.title}}</b>
    <ul ng-if="mapData.children.length">
        <li ng-repeat="child in mapData.children" ng-include="child-map.html" ></li>
    </ul>

指令定义：

function widgetNodeMap () {
    var nodeMap = {};
    nodeMap.restrict = 'E'
    nodeMap.scope = {
        'mapData' : '=mapData'
    }
    nodeMap.controller = ['$scope',function($scope){
        // $scope.currentNode = $scope.mapData.id;
        $scope.selectNode = function(node_id){
            $scope.currentNode = node_id;
        } 
        $scope.getCurrentNode = function(){
            return $scope.currentNode;
        }

    }];
    nodeMap.templateUrl = '/static/app/components/widget/widget.view.node-map.html';

    return nodeMap
}

主要模板：

 <widget-node-map map-data="navCtrl.mapData">
 </widget-node-map>

但我仍然无法正确列出数据。你能帮助我，我错了吗？

Answer 1

我想出了解决方案

    <script type="text/ng-template" id="child-map.html">
        <ul ng-if="child.children.length">
            <li ng-repeat="child in child.children">
                <a ng-click="selectNode(child)">{{child.title}}</a>
                <div ng-include src="'child-map.html'"></div>
            </li>
        </ul>
    </script>
    <div class="row">
        <div class="col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2 col-sm-12 col-xs-12">
            <a ng-click="selectNode(mapData)">{{mapData.title}}</a>
            <ul ng-if="mapData.children.length">
                <li ng-repeat="child in mapData.children">
                    <a ng-click="selectNode(child)">{{child.title}}</a>
                    <div ng-include src="'child-map.html'"></div>
                </li>
            </ul>
        </div>
    </div>

在指令模板中使用ng-include的递归模板

1 个答案: