javascript - Angular 加载 Json 错误

标签 javascript html angularjs

我是 Angular 初学者。 我想在加载时加载一个 json,这很好用 但是如果我对 input 字段进行更改,我会收到一条错误消息。

Error: $rootScope:infdig Infinite $digest Loop

谢谢

我的 HTML

<body ng-app="myApp" ng-controller="mainCtrl">
<div id="wrapper">
    <header style="height:50px;"> </header>
    <div class="container">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
        <script src="js/controller.js"></script>
        <section>
            <div class="col-md-4">
                <label for="words">Wörter</label>
                <input ng-model="words" id="words" type="number" name="words" placeholder="Wörter" min="10" max="10000" value="{{words}}" step="10"> 
            </div>
            <p>{{words}}</p>
            <div id="view" class="col-md-6">

                <ul ng-controller="loadContent">
                    <li ng-repeat="content in contents | orderBy:random">{{content.text}}</li>

                </ul>
            </div>

        </section>
    </div>
</div>

我的javascript

var app = angular.module('myApp', []);
app.controller('mainCtrl', function ($scope, $http) {
    $scope.words = 40;
    $scope.letterLimit = 400;
});
app.controller('loadContent', function ($scope, $http) {
 $scope.random = function () {
        return 0.5 - Math.random();
    }
 $scope.loadContent = function() {
     var def = $http.get('data.json').success(function(data) {
         $scope.contents = data;
     });
 }
 $scope.loadContent();
});

我的json

[
{"text": "Lorem ipsum1", "date" : true},
{"text": "Lorem ipsum2", "data" : true},
{"text": "Lorem ipsum3", "data" : true}
]

最佳答案

我认为,一旦您与 View 交互,angular 就会不断消化您的 Controller ,因此会在您的 Controller 底部重复执行 $scope.loadContent();

我假设您只希望它触发一次?如果是这样,请从您的 Controller 中删除函数调用并按如下方式修改您的 View 。

<body ng-app="myApp" ng-controller="mainCtrl" ng-init="loadContent">

有了这个,$scope.loadContent 只被调用一次。如果您想以其他方式或多次调用它,请在您的问题中说明。

关于javascript - Angular 加载 Json 错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40171349/

相关文章:

javascript - 为什么当用户输入空格或字符过多/不足时,此函数不给出 window.alert?

javascript - Google Analytics 事件跟踪 - 页面退出

html - Eclipse 无法识别某些有效的属性和标记

javascript - 在 HTML Canvas 上填充某些像素

javascript - Angular 表单未提交

javascript - 为什么 ng-options 指令需要 ng-model

Javascript 或 Jquery : change CSS of an attribute of an id selected

Javascript/HTML 赋值

angularjs - bootstrap-multiselect 下拉菜单 - 将焦点集中在搜索上并实现 typeahead 功能

javascript - Angular + Selenium : Cannot get value from input field