javascript - AngularJS $rootScope :infdig and ngRepeat:dupes

标签 javascript ajax angularjs 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 = 函数(sectionName)
  2. {
  3. confService.getAllBranchLines("extensions", sectionName).then(function(_branches)
  4. {
  5. $scope.applyBranches(_branches);
  6. });
  7. }

但我可能是错的，如果我是正确的，我不知道如何解决它

**编辑:**此处进行现场演示http://107.170.154.154

最佳答案

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

这行代码是你的问题:

{{loadBranches(section.sectionName)}}

...与随附的 Controller 代码一起使用。

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

部分Ctrl:

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

关于javascript - AngularJS $rootScope :infdig and ngRepeat:dupes，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23897110/

上一篇：javascript - 获取 Mindmup 的可编辑表中的整行

下一篇：javascript - 如何永久阻止在 onbeforeunload 上分配函数的能力

相关文章：

javascript - PHP生成html文本框计算amt=qty*价格

javascript - 如果条件不满足则提交表单

javascript - 在 angularjs 页面上使用 Bootstrap Accordion

javascript - AngularJS 1.X 对转换后的数据应用过滤器

javascript promise onSuccess 处理程序

javascript - 已内存组件的子组件是否也已内存？

javascript - 如何从 Javascript 解析外部文件中的 html

java - 使用 ionic 构建的混合应用程序在 android 上崩溃但在 ios 上不崩溃

javascript - 如何隐藏在带有星号字符的 JavaScript 对话框提示中输入的密码？

javascript - 如何在node.js应用程序中的mongodb中按层次顺序插入数据？

©2024 IT工具网  联系我们