Question

我试图解决问题，这显示在＆＃34; advanced＆＃34;模板。整棵树工作得很好，除了＆＃34;高级＆＃34;模板。它应该在树木中显示树木。任何想法如何使这个模板使用提供的示例JSON＆＃34; mainBody＆＃34;？

<!DOCTYPE html>

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script>

        var app = angular.module("Application",[]);

        app.controller("treeCtrl",function ($scope){
            $scope.mainBody =
            {
                tpl: 'body',
                tpls:
                [
                    {
                        tpl: 'simple_a',
                        tpls:[],
                    },

                    {
                        tpl: 'body',
                        tpls:[
                            {
                                tpl: 'simple_b',
                                tpls:[],
                            },                          
                        ],
                    },

                    {
                        tpl: 'simple_b',
                        tpls:[],
                    },
                    {
                        tpl: 'advanced',
                        tpls_a:
                        {
                            tpl: 'body',
                            tpls:
                            [
                                {
                                    tpl: 'simple_b',
                                    tpls:[],

                                },                              

                                {
                                    tpl: 'simple_a',
                                    tpls:[],
                                },                              
                            ]
                        },
                        tpls_b:
                        {
                            tpl: 'body',
                            tpls:[]
                        },
                    },

                ]
            }

        });


    </script>   

</head>

<body>
    <div ng-app="Application" ng-controller="treeCtrl">

        <script type="text/ng-template" id="body.html">
            <li ng-repeat="(key,currentTpl) in currentTpl.tpls" 
                ng-include="currentTpl.tpl + '.html'" 
                onload="parent=$parent.$parent.$parent"></li> 
        </script>

        <script type="text/ng-template" id="advanced.html">
            <div>
                advanced template
            </div>

            <div ng-if="currentTpl.tpls_a" 
                ng-include="currentTpl.tpls_a.tpl + '.html'"  
                onload="currentTpl=currentTpl.tpls_a"></div>

            <div ng-if="currentTpl.tpls_b" 
                ng-include="currentTpl.tpls_b.tpl + '.html'"  
                onload="currentTpl=currentTpl.tpls_b"></div>
        </script>

        <script type="text/ng-template" id="simple_a.html">
            <div>
                simple template A
            </div>      
        </script>

        <script type="text/ng-template" id="simple_b.html">
            <div>
                simple template B
            </div>      
        </script>



            <div ng-include="mainBody.tpl + '.html'"  
            onload="currentTpl=mainBody"></div>

    </div>

</body>

Answer 1

在我的同事的帮助下，我找到了解决方案，这里是：http://jsfiddle.net/cz7rm7c6/

    app.directive('leaf', function() {
      return {
        restrict: 'E',
        templateUrl: 'leaf.html',
        scope: {
            currentTpl: '=tpl'
        }
      };
    });

具有高级模板的角树（树内的树）

1 个答案: