AngularJS $ rootScope：infdig和ngRepeat：dupes

时间：2014-05-27 19:07:13

标签： javascript ajax angularjs ng-repeat

我已经放弃了试图解决这个问题并且已经向Google寻求帮助。从我收集到的角度来看，AngularJs在变量和函数上有一些神奇的作用。我已经读过，尽管你在Javascript中正常编程，但是AngularJS对于函数非常挑剔，而且一个小小的错误会导致你的程序崩溃，或者浏览器可能会出现无限循环的错误。关于函数及其处理数据的方式会导致创建一个新对象，该对象与AngularJS的魔术后端的旧数据副本或类似的东西不匹配。

我尝试做的事情我真的需要AngularJS，而我想要做的就是通过ajax获取项目列表，将其插入列表，然后在每个列表项目中插入一秒钟通过ajax抓取的项目的子列表，根据其插入的项目而不同。我现在已经尝试了4天才能让它发挥作用。

我已经重写了声明所有函数本身的方式，声明了所有变量，以及函数和变量处理所有数据的方式几十倍。

非常感谢任何帮助。

这是HTML 

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" ng-app='app'> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" ng-app='app'> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" ng-app='app'> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" ng-app='app'> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="client_components/custom_component/css/bootstrap.min.css">
    <link rel="stylesheet" href="client_components/custom_component/css/ui-lightness/jquery-ui-1.10.4.min.css">
    <link rel="stylesheet" href="client_components/custom_component/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="client_components/custom_component/css/main.css">
</head>

<body ng-controller="MasterCtrl">
    <!--[if lt IE 7]>
    <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <div class="container">
        <div class="row">
            <div class="col-xs-3" ng-controller="NavCtrl">
                <div class="panel panel-default">
                    <div class="panel-body">
                        {{msg}}
                    </div>
                </div>
            </div>

            <div class="col-xs-6">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <ul class="list-group section-list" id="list">
                            <li class="list-group-item" ng-repeat="section in sections" ng-controller="SectionCtrl">
                {{section.sectionName}}&nbsp;
                                {{loadBranches(section.sectionName)}}

                                <ul class="list-group branch-list">
                                    <li class="list-group-item list-group-item-info" ng-repeat="branch in branches" ng-controller="BranchCtrl">
                                        {{branch.rawLine}}&nbsp;
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="col-xs-3">
                <div class="panel panel-default">
                    <div class="panel-body">
                        Unused
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Javascript Dependencies -->
    <!-- Modernizr and its Respond -->
    <script src="client_components/custom_component/js/vendor/modernizr-2.7.2.js" defer></script>
    <script src="client_components/custom_component/js/vendor/respond.js" defer></script>

    <!-- jQuery suite -->
    <script src="client_components/custom_component/js/vendor/jquery-1.11.0.min.js" defer></script>
    <script src="client_components/custom_component/js/vendor/jcanvas.js" defer></script>
    <script src="client_components/custom_component/js/vendor/jquery-ui-1.10.4.min.js" defer></script>

    <!-- Bootstrap and Angular -->
    <script src="client_components/custom_component/js/vendor/bootstrap.min.js" defer></script>
    <script src="client_components/custom_component/js/vendor/angular.min.js" defer></script>

    <!-- Custom -->
    <script src="client_components/custom_component/js/main.js" defer></script>
</body>
</html>

继承Javascript代码

"use strict";

var appModule = angular.module('app', []);

 appModule.service("confService", function($http, $q)
 {
    // Expose Public API
    return({
        moveLine: moveLine,
        getAllLines: getAllLines,
        getAllLinesGroupedObj: getAllLinesGroupedObj,
        getAllLinesGroupedArr: getAllLinesGroupedArr,

        createSection: createSection,
        deleteSection: deleteSection,
        moveSection: moveSection,
        getAllSectionLines: getAllSectionLines,

        createBranch: createBranch,
        deleteBranch: deleteBranch,
        moveBranch: moveBranch,
        getAllBranchLines: getAllBranchLines
    });

    // ----
    // PUBLIC
    // ----

    function moveLine(config, from, to)
    {
        var request = $http({
            method: "post",
            url: "server_components/custom_component/ajax/changeLineOrder.php",
            data:
            {
                config: config,
                from: from,
                to: to
            }
        });

        return(request.then(handleSuccess, handleError));
    };

    function moveSection(config, from, to)
    {
        var request = $http({
            method: "post",
            url: "server_components/custom_component/ajax/changeSectionOrder.php",
            data:
            {
                config: config,
                from: from,
                to: to
            }
        });

        return(request.then(handleSuccess, handleError));
    };

    function moveBranch(config, section, from, to)
    {
        var request = $http({
            method: "post",
            url: "server_components/custom_component/ajax/changeBranchOrder.php",
            data:
            {
                config: config,
                section: section,
                from: from,
                to: to
            }
        });

        return(request.then(handleSuccess, handleError));
    };

    function getAllLines(config)
    {
        var request = $http({
            method: "post",
            url: "server_components/custom_component/ajax/getAll.php",
            data:
            {
                config: config
            }
        });

        return(request.then(handleSuccess, handleError));
    };

    function getAllLinesGroupedObj(config)
    {
        var request = $http({
            method: "post",
            url: "server_components/custom_component/ajax/getAll2.php",
            data:
            {
                config: config
            }
        });

        return(request.then(handleSuccess, handleError));
    };

    function getAllLinesGroupedArr(config)
    {
        var request = $http({
            method: "post",
            url: "server_components/custom_component/ajax/getAll2Arr.php",
            data:
            {
                config: config
            }
        });

        return(request.then(handleSuccess, handleError));
    };

    function getAllBranchLines(config, section)
    {
        var request = $http({
            method: "post",
            url: "server_components/custom_component/ajax/getAllBranches.php",
            data:
            {
                config: config,
                section: section
            }
        });

        return(request.then(handleSuccess, handleError));
    };

    function getAllSectionLines(config)
    {
        var request = $http({
            method: "post",
            url: "server_components/custom_component/ajax/getAllSections.php",
            data:
            {
                config: config
            }
        });

        return(request.then(handleSuccess, handleError));
    };

    function deleteSection(config, section)
    {
        var request = $http({
            method: "post",
            url: "server_components/custom_component/ajax/removeSection.php",
            data:
            {
                config: config,
                it: section
            }
        });

        return(request.then(handleSuccess, handleError));
    };

    function createSection(config, section)
    {
        var request = $http({
            method: "post",
            url: "server_components/custom_component/ajax/createSection.php",
            data:
            {
                config: config,
                it: section
            }
        });

        return(request.then(handleSuccess, handleError));
    };

    function deleteBranch(config, section, branch)
    {
        var request = $http({
            method: "post",
            url: "server_components/custom_component/ajax/removeBranch.php",
            data:
            {
                config: config,
                section: section,
                it: branch
            }
        });

        return(request.then(handleSuccess, handleError));
    };

    function createBranch(config, section, branch)
    {
        var request = $http({
            method: "post",
            url: "server_components/custom_component/ajax/createBranch.php",
            data:
            {
                config: config,
                section: section,
                it: branch
            }
        });

        return(request.then(handleSuccess, handleError));
    };

    // ----
    // PRIVATE
    // ----

    function handleError(response)
    {
        if(
            !angular.isObject(response.data) ||
            !response.data.message
        )
        {
            return($q.reject(response.data.message));
        }

        return(response.data);
    };

    function handleSuccess(response)
    {
        return(response.data);
    };

 });

appModule.controller('MasterCtrl', function($scope, confService)
{
    $scope.sections = [];
    loadSections();

    // ----
    // PRIVATE
    // ----

    function loadSections()
    {
        confService.getAllSectionLines().then(function(_sections)
        {
            applySections(_sections);
        });
    };

    function applySections(_sections)
    {
        $scope.sections = _sections;
    };
});

appModule.controller('SectionCtrl', function($scope, confService)
{
    $scope.branches = [];

    $scope.loadBranches = function(sectionName)
    {
        confService.getAllBranchLines("extensions", sectionName).then(function(_branches)
        {
            $scope.applyBranches(_branches);
        });
    }

    $scope.applyBranches = function(_branches)
    {
        $scope.branches = _branches;
    }
});

appModule.controller('BranchCtrl', function($scope)
{

});

appModule.controller('NavCtrl', function($scope)
{
    $scope.msg = "Construction";
});

不幸的是没有现场演示，这是公司代码，这是我被授权发布的所有帮助，但是如果您需要任何其他信息，请询问我可以分享它。就像我说的任何帮助都会非常感激。

我已经缩小了

中似乎发生的错误
  1. $ scope.loadBranches = function（sectionName）
  2. {
  3. confService.getAllBranchLines（＆＃34; extensions＆＃34;， sectionName ）。then（function（_branches）
  4. {
  5. $ scope.applyBranches（_branches）;
  6. }）;
  7. }

    8. 但我可能是错的，如果我是对的，我无法弄清楚如何解决它

    **编辑：**现场演示http://107.170.154.154

1 个答案:

答案 0 :(得分：1)

您的ng-repeat依赖于范围函数，该函数每次运行时都会返回一个新数组。即使返回值在内部每次都是等效的，它仍然是一个不同的对象（即函数不是幂等的）。这会导致另一个$ digest循环运行，返回另一个值，导致它再次运行，依此类推。如果不加以控制，它会永远持续下去。这就是您看到错误的原因。

您的代码的这一行是您的问题：

{{loadBranches(section.sectionName)}}

......与随附的控制器代码一起使用。

解决方案是初始化$scope.branches：

<强> SectionCtrl： 

appModule.controller('SectionCtrl', function($scope, confService) {
    confService.getAllBranchLines("extensions", $scope.section.sectionName).then(function(_branches)
    {
         $scope.branches = _branches;
    });
});

<强> HTML：

{{section.sectionName}} 

<ul class="list-group branch-list">
    <li class="list-group-item list-group-item-info" ng-repeat="branch in branches"
    ng-controller="BranchCtrl">
        {{branch.rawLine}}&nbsp;
    </li>
</ul>

Demo

相关问题
最新问题