J.N J.N - 1 month ago 12
HTML Question

Angular Load Json Error

I'm an Angular beginner.
I want to load a

on load, this works well
but if I make a change to an
field, I get an error message.

Error: $rootScope:infdig Infinite $digest Loop



<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>
<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 id="view" class="col-md-6">

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



My 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;

My json

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


I think that angular is continuously disgesting your controller as soon as you interact with the view, and is therefore executing $scope.loadContent(); at the bottom of your controller repeatedly.

I assume you only wish for this to fire once? If so, remove the function call from your controller and modify your view as below.

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

With this, $scope.loadContent is only called once. if you wish to call it another way, or multiple times, please specify in your question.