$ rootScope: infdig Fehler in angularjs

-1

Ich mache eine App mit AngularJS.

Plötzlich habe ich diesen Fehler bekommen.

Error: [$rootScope:infdig] http://errors.angularjs.org/1.6.4/ $rootScope/infdig?p0=10&p1=%5B%5D

Siehe mein Code:

HTML:

<body ng-app="invApp" ng-controller="InvoiceController as ctrl"> 
<span ng-repeat="code in ctrl.codes">{{ getProduct(code) }}</span> 
</body>

JS:

var app = angular.module("invApp", []); 
app.controller("InvoiceController", function ($scope, $http) { 
    $scope.codes = ["KKS", "KKB", "SNS"]; 
    $scope.getProduct = function (code) { 
     $http({ 
      method: 'GET', 
      url: '../api?action=getproduct&code='+code 
     }).then(function successCallback(response) { 
      var something = response.data; 
     }); 
     return something; 
    }; 
});

Quelle

2017-05-29 Tareque Md Hanif

Was Code und warum Sie ist sind returning data2 – ukn

Diese

<body ng-app="invApp" ng-controller="InvoiceController"> 
{{ getProduct("KKS") }} 
</body>

Erstellt Infinitivzahl der Anfrage. Um dir zu helfen, muss ich was du versuchst zu tun?

Quelle

2017-05-29 19:28:24

Ich möchte etwas drucken von AJAX Anfrage erhalten. –

Dann sollten Sie den Aufruf vom Controller ausführen, nicht von HTML (entfernen Sie es aus HTML). Fügen Sie diese Zeile in den Controller $ scope.getProduct ('KKS'); –

Können Sie es jetzt @MountainKing lösen? –

Wenn Sie eine Funktion innerhalb von {{function()}} aufrufen, müssen Sie vorsichtig sein. Die Interpolation führt jeden Digest-Zyklus aus, und Sie rufen eine Funktion in diesem auf. Das Problem besteht darin, dass Sie einen $ http-Aufruf ausführen, der wiederum einen Digest-Zyklus auslöst. Versuchen Sie es direkt vom Controller aus aufzurufen. Sie sollten einen HTTP-Aufruf durchführen, wenn Ihre Seite diese Daten lädt und verwendet.

<body ng-app="invApp" ng-controller="InvoiceController as ctrl"> 
    <span ng-repeat="p in products">{{ p }}</span> 
</body> 

app.controller("InvoiceController", function ($scope, $http) { 
    $scope.getProducts("all your codes"); 
    $scope.getProducts = function (codes) { 
     $http({ 
      method: 'GET', 
      url: '../api?action=getproducts' 
     }).then(function successCallback(response) { 
      $scope.products = response.data; 
     }); 
    }; 
});

Machen Sie Ihre Server ein Array zurück, das alle Ihre Produkte (getProducts statt getProduct) auf einmal und dann durchlaufen sie ng-repeat verwenden. Es sollte so etwas aussehen.

Quelle

2017-05-29 19:29:49 ukn

Kannst du es jetzt lösen @ukn? Ich habe meine Frage bearbeitet. –

Ich habe meine Antwort bearbeitet – ukn

This error occurs when the application's model becomes unstable and each $digest cycle triggers a state change and subsequent $digest cycle. AngularJS detects this situation and prevents an infinite loop from causing the browser to become unresponsive.

Es ist eine schlechte Methode, Ihre Daten über einen Serveraufruf zu rendern. Weil der angularjs-Lebenszyklus den Server jedes Mal aufrufen würde.

Hier ist, wie ich es umsetzen würde:

var app = angular.module("invApp", []); 
app.controller("InvoiceController", function ($scope, $http) { 
    $scope.getProduct = function (code) { 
     $http({ 
      method: 'GET', 
      url: '../api?action=getproduct&code='+code 
     }).then(function successCallback(response) { 
      $scope.product = response.data; 
     }); 
    }; 
}); 

$scope.getProduct('KKS');

Innerhalb der Vorlage das Produkt, das im Rahmen gespeichert wurde.

<body ng-app="invApp" ng-controller="InvoiceController"> 
{{ product }} 
</body>

Quelle

2017-05-29 19:40:50

Können Sie es jetzt lösen @HannounYassir? Ich habe meine Frage bearbeitet. –

Meine Antwort ist immer noch gültig.Sie sollten Ihr Code-Array durchlaufen und dann im Bereich speichern und dann auf Ihrer Vorlage rendern. –

Sie haben einige Probleme in Ihrem Code.

Die Rückgabe von something ist falsch; Sie versuchen, von einer Methode zurückzugeben, die einen asynchronen Aufruf ausführt.

Was sollten Sie stattdessen tun ist, so schnell in den $scope die abgerufenen Daten hinzufügen, wie es daher geladen wird:

$scope.codes = ['KKS', 'KKB', 'SNS']; 

$scope.getProduct = function (code) { 
    return $http({ 
    method: 'GET', 
    url: '../api?action=getproduct&code=' + code, 
    }); 
}; 

$q 
    .all($scope.codes.map(function (code) { 
    return $scope.getProduct(code); 
    })) 
    .then(function (products) { 
    $scope.products = products; 
    });

und dann:

<body ng-app="invApp" ng-controller="InvoiceController as ctrl"> 
    <span ng-repeat="product in ctrl.products">{{ product }}</span> 
</body>

Quelle

2017-05-29 19:46:54 Ioan

Können Sie es jetzt lösen @loan? Ich habe meine Frage bearbeitet. –

Haben Sie meine Lösung versucht? – Ioan

Nein. Weil ich nicht nur "KKS" habe. Ich habe 3 Zeichenfolgen im Codes-Array. Bitte überprüfen Sie meinen Code. Ich habe meine Frage vor 29 Minuten bearbeitet. –

$ rootScope: infdig Fehler in angularjs

Antwort

Verwandte Themen