Question

在下面的代码中给出了一个在工厂中失败的递归调用。我期待的是它应该提醒所有的名字 Level1-1，Level3-1，Level4-1，Level4-2等等。如果我对递归调用行进行注释，则它会正确警告所有level2名称，例如Level2-1，Level2-2，Level2-3，Level2-4。请说明什么是错的？

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>My Angular App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script type="text/javascript">

    (function () {
        'use strict';

        function gridFactory($http) {
            var service = {
                treeCollapse: CollpaseFunction,
                drawd3Dia: D3DiagramFunction,
                callParams: {}
            };

            return service;          

            function D3DiagramFunction() {
                var treeData = {
                    name: "Level1-1", children: [
                        {
                            name: "Level2-1",
                            children: [
                                {
                                    name: "Level3-1",
                                    children: [
                                        {
                                            name: "Level4-1",
                                            children: []
                                        },
                                        {
                                            name: "Level4-2",
                                            children: []
                                        }
                                    ]
                                },
                                {
                                    name: "Level3-2",
                                    children: []
                                }
                            ]
                        },
                        {
                            name: "Level2-2",
                            children: []
                        },
                        {
                            name: "Level2-3",
                            children: []
                        },
                        {
                            name: "Level2-4",
                            children: []
                    }
                    ]
                }

                treeData.children.forEach(this.treeCollapse);
            }

            function CollpaseFunction(c) {
                alert(JSON.stringify(c.name));
                // The follwing call seems to be failing. Why?? Please correct this.
                // I intend this to be a recursive call, calling it self(CollpaseFunction).
                // What am I doing wrong? What I am expecting is it should alert all the names 
                // Level2-1, Level3-1, Level4-1, Level4-2 and so on. But its failing.
                // If I comment the following line, then it alerts all the level2 names 
                // correctly such as Level2-1, Level2-2, Level2-3, Level2-4
                //c.children.forEach(this.treeCollapse);
                // The following is also similarly not working. Using gridFactory.treeCollapse 
                // instead of this.treeCollapse
                //c.children.forEach(gridFactory.treeCollapse);
            }

        }

        function patientCategoryController($scope, $controller, gridFactory) {
            gridFactory.drawd3Dia();
        }

        angular.module('abvhHisApp', []);
        angular.module('abvhHisApp').factory('gridFactory', gridFactory);
        gridFactory.$inject = ['$http'];
        angular.module('abvhHisApp').controller('patientCategoryController', patientCategoryController);
        patientCategoryController.$inject = ['$scope', '$controller', 'gridFactory'];

    }())
    </script>
</head>
<body>
    <div data-ng-app="abvhHisApp">
        <div data-ng-controller="patientCategoryController">
            <h1>Dude...Happy New Year to you!!!! :)</h1>
        </div>
    </div>
</body>
</html>

Answer 1

该功能应如下所示。

function CollpaseFunction(c) {
    c.children.forEach(function (d) { CollpaseFunction(d) });
    // The following are incorrect.
    // c.children.forEach(this.treeCollapse);
    // c.children.forEach(gridFactory.treeCollapse);              
}

递归angularjs工厂函数失败

1 个答案: