javascript - AngularJS $rootScope :infdig and ngRepeat:dupes-6ren

javascript - AngularJS $rootScope :infdig and ngRepeat:dupes

转载作者：行者123 更新时间：2023-11-28 01:15:24

我已经放弃尝试解决这个问题，并在 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";
});

不幸的是，没有现场演示，这是公司代码，也是我被授权发布以寻求帮助的全部内容，但是如果您需要任何其他信息，请询问，因为我可以分享。就像我说的，任何帮助将不胜感激。

我已经缩小了错误发生的范围

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

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

**编辑:**此处进行现场演示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:

<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/

文章推荐： html - CSS 像素的小数点能有多精确

文章推荐： css - 响应式背景图片高度

文章推荐： c++ - 如何从派生类函数中调用虚函数

angularjs - ngRepeat 与 ngInit - ngRepeat 不会刷新渲染值
我有一个使用 ngRepeater 显示的数组，但通过这个指令，我使用 ngInit 指令来执行应该返回要显示的对象的函数。一切都工作正常，但是当我添加“新建”按钮并向数组添加新值时，只有一次我认为函
javascript - 如何在嵌套的 ngRepeat 中的第二个 ngRepeat 上应用过滤器？
我想将搜索框的 $filter 应用于嵌套的 ng-repeat。我有一个类别数组，每个类别都包含一个项目列表。当我将 $filter 放在第一个 ngRepeat 上时，它会过滤并保留具有正确项目的
AngularJS 在嵌套的 ngRepeat 中访问 $first of ngRepeat parent
我正在尝试从嵌套的 ngRepeat 中访问 ngRepeat 父级的 $first。有没有办法在嵌套的 ngRepeat 中使用别名或访问 $first？我试过 $parent.$first，但它似
javascript - AngularJS ngRepeat - 监听元素移动(我需要使用 ngRepeat 呈现 iframe 列表)
我正在使用 ng-repeat 指令呈现 TinyMCE 所见即所得列表: 当我更改 Controller 中小部件的顺序时，TinyMCE 的实例会自动相应地重新排列。问题是 Tin
javascript - 出现 ngRepeat 错误(错误 : ngRepeat:iidexp Invalid Identifier)
Controller 代码: function usersView() { var directive = { templateUrl : "users/users.
angularjs - ngRepeat 更新后的指令
当 ng-repeat 完成更新时，我在触发指令时遇到了一些 AngularJS 问题。我有三个命名数组，通过三个链接切换到，允许 ng-repeat 显示选定的数组。我想在完成后关闭一些代码，因为我
angularjs - ngRepeat 和指令执行顺序
当 Angular 指令包含 ngRepeat 元素时，ngRepeat 执行似乎发生在包含指令的链接执行之后。是否有一种机制($watch、$observe 等)可用于在 ngRepeat 执行后
javascript - ngrepeat 与表格一致编辑
我试图允许重命名一行中的项目。我知道使用 $scope.editMode 等，但我意识到，当我将其用于 ng-repeats 时，我将列表中的所有条目都视为可编辑，而不是特定索引。这是我的 Html
javascript - 基于多个搜索输入过滤 ngrepeat
我有一个对象数组。我正在尝试设置一种方法来按用户输入中的每一列进行过滤。每个列都有一个输入下拉列表，您可以在其中选择一个值，这样您就可以为每列选择不同的过滤器。 col1 col2 col3 c
javascript - ngRepeat 按数组属性过滤
如果我有一个对象，其属性是数组，如何按该属性的第一个元素进行过滤？数据 { Id: "0", Name: ["John", "Doe"] } ngRepeat {{ u.Name[0
javascript - ngRepeat - 首先按特定键对对象进行排序
我正在编写一个 AngularJS 应用程序(Angular 1)，它需要在页面上显示一个表格列表。然而，某些键需要首先显示，如下所示: baz (data) bar (data) foo (data
AngularJS ngRepeat 指令没有编译选项
我找到了source code ngRepeat 没有 HTML Compiler 指南中提到的 compile 选项. 我对此感到困惑...... 谁能告诉我为什么...... 最佳答案 ngRep
javascript - ngRepeat 与其他指令结合
我有一个严重的问题。我必须实现一个包含一些组合数据的表格 View 。我必须在表行中显示一些数据，后面的行必须是有关该行的一些详细信息。更重要的是，用户应该能够隐藏单击该行的详细信息。例如，模型是某
javascript - For 循环和数组问题 - ngRepeat
我有一个数组，其中包含一些数据，名为 data . 数据如下: var data = [ { id: 1, title: 'title', desc: 'desc',
javascript - 在单个标签中使用两个 ngRepeat
我们可以在一个 html 标签中使用多个 ngRepeats 吗？就像下面的代码: 或我们可以使用 && 区分同一个 ngRepeat 中的两个不同功能吗？就像下面的代码: 我的目的是创
javascript - ngRepeat 项目和重复项目的属性？
我需要重复我拥有的所有项目，但我需要通过“数量”属性重新重复项目。 $scope.products = [{name: 'Mouse', price: 2, quantity: 3},
angularjs - 动画 ngRepeat
我正在构建一个旋转木马，方法是从数组的开头移动一个元素，然后将其推回到末尾，使旋转木马前进。从数组末尾弹出一个元素并将其取消移位到数组的开头将倒回该元素。这很好用。当我尝试为它制作动画时，问题就出现了
javascript - 为什么没有填充 ngRepeat
我在我的 Angular 应用程序中使用 ngRepeat，由于某种原因，ngRepeat 没有填充，即使它连接到的集合填充了正确的数据。我正在做的是向节点服务器发送 http get 请求以请求数
javascript - ngRepeat 用作表内的元素不起作用
当 AngularJS 1.6.0(与旧版本相同)和 ngRepeat 指令用作元素嵌套在表格中时，我遇到了一个奇怪的问题。简单地说在 , 然后放一个内部:它不起作用。但是如果你把在之外，例
javascript - ngRepeat 无法遍历嵌套数组
我想访问我的数组数组的每个值: [ ["0","0","0"], ["1","1","1"], ["1","0","0"] ] 我只在里面做了两次 ngRepeat {{line}}

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - AngularJS $rootScope :infdig and ngRepeat:dupes