$ rootScope：infdig angularjs中的錯誤

-1

我正在使用AngularJS製作應用程序。

突然我得到了這個錯誤。

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

見我的代碼：

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; 
    }; 
});

來源

2017-05-29 Tareque Md Hanif

什麼是代碼，爲什麼是你返回data2 – ukn

這

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

將創建不定數量的請求。爲了幫助你，我需要你想做什麼？

來源

2017-05-29 19:28:24

我想打印從AJAX請求得到的東西。 –

然後你應該從控制器執行調用，而不是從html（從html中移除它）。將此行添加到控制器$ scope.getProduct（'KKS'）; –

你現在可以解決它@MountainKing？ –

當你在{{function（）}}中調用一個函數時，你需要小心。內插運行每個摘要循環，並且你正在調用一個函數，問題是你正在做一個$ http調用，這又會觸發一個摘要循環。嘗試直接從控制器調用它。當您的網頁加載並使用此數據時，您應該進行一次http調用。

<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; 
     }); 
    }; 
});

讓您的服務器立即返回一個包含所有你的產品（的getProducts而不是getProduct）數組，然後用NG-重複迭代它。它應該看起來像那樣。

來源

2017-05-29 19:29:49 ukn

你現在可以解決它@ukn？我編輯了我的問題。 –

我編輯了我的答案 – 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.

通過服務器調用呈現數據是一種不好的做法。因爲angularjs生命週期每次都會調用服務器。

這是我將如何實現它：

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');

內模板使用保存在範圍內的產品。

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

來源

2017-05-29 19:40:50

你現在可以解決它@HannounYassir？我編輯了我的問題。 –

我的答案仍然有效。你應該遍歷你的代碼數組，然後將它們保存到作用域中，然後將它們呈現在模板上。 –

你在代碼中幾乎沒有問題。

something的返回是錯誤的;您正嘗試從執行異步調用的方法返回返回。

你應該不是做的是在$scope所取得的數據，一旦它被加載加載，因此：

$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; 
    });

然後：

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

來源

2017-05-29 19:46:54 Ioan

你現在可以解決它@loan？我編輯了我的問題。 –

您是否嘗試過我的解決方案？ – Ioan

不是，因爲我不僅有「KKS」。我在代碼數組中有3個字符串。請查看我的代碼。我在29分鐘前編輯了我的問題。 –

$ rootScope：infdig angularjs中的錯誤

回答

相關問題