Как устранить данную ошибку Angular js?

Question

[shipovalovyuriy]

Вылезает ошибка типа
Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []

html:

<!-- Loading libraires -->
<link rel="stylesheet" href="css/style.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript" src="js/script.js"></script>

<!-- Main app -->

<div class="search_wrapper" ng-app="searchApp">
<div class="app_wrap" ng-controller="searchCtrl">
	<div class="search_param">
		<nav class ='brands'>
			<li  ng-repeat="brand in brands">{{brand}}</li>
		</nav>
		<nav class ='cat'>
			<span class = 'parent_cat' ng-repeat="cat in cats track by $index">

			{{cat[1]}}

			{{getChildList(cat[0])}}
			
		<nav class="child_cat">
			<li ng-repeat="child in child_cats track by $index">{{child}}</li>
		</nav>
			
			</span>
		</nav>
	</div>
	<div class="form_search">
		<form action="">
			<input type="text">
		</form>
	</div>
	<div class="search_rezult">

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

js:

var searchApp = angular.module('searchApp',[]);

searchApp.controller('searchCtrl', ['$scope','$http', function($scope,$http){


/*Getting Manufacturers list*/

	var name  = " SELECT * FROM audio.w8265_virtuemart_manufacturers_ru_ru";
	
	$http({method:"GET",url:'ajax/index.php',params:{'type':name}}).success(function(response){
		response = angular.fromJson(response);
		console.log(response);
		var arr = [];
		var i = 0;
		$.each(response, function(index, val) {
			arr[i] = val.mf_name;
			i++;
		});
		$scope.brands = arr;
		})

	/*Getting Parent Categories list*/
		name = "SELECT virtuemart_category_id, category_name FROM audio.w8265_virtuemart_categories_ru_ru join audio.w8265_virtuemart_category_categories on virtuemart_category_id = category_child_id where category_parent_id = 0"
		$http({method:"GET",url:'ajax/index.php',params:{'type':name}}).success(function(response){
		response = angular.fromJson(response);
		console.log(response);
		var arr = [];
		var i = 0;
		$.each(response, function(index, val) {
			arr[i] = new Array();
			arr[i][0]= val.virtuemart_category_id;
			arr[i][1]= val.category_name;
			console.log(arr[i]);
			i++;
		});
		$scope.cats = arr;
		})


		$scope.child_cats = [];

	/*Getting Child Categories list*/
		$scope.getChildList = function(parent){
		name = "SELECT category_name FROM audio.w8265_virtuemart_categories_ru_ru join audio.w8265_virtuemart_category_categories on virtuemart_category_id = category_child_id where category_parent_id ="+parent;
		$http({method:"GET",url:'ajax/index.php',params:{'type':name}}).success(function(response){
		response = angular.fromJson(response);
		console.log(response);
		var arr = [];
		var i = 0;
		$.each(response, function(index, val) {
			arr[i] = new Array();
			arr[i]= val.category_name;
			console.log(arr[i]);
			i++;
		});

		$scope.child_cats = arr;
		})

		}
}]);

Так же не могли бы вы посоветовать: что можно изменить в структуре и т.д.

Answer 1

[Сергей Протько]

1 - метод $scope.getChildList вызывается на каждый $digest цикл
2 - каждый вызов $scope.getChildList порождает вызов запроса на сервак через $http
3 - каждый вызов $http завершенный (да и вообще изменение статуса) порождает запуск $digest цикла
4 - возвращаемся к первому пункту

// Все люди ходят в туалет
// но обычно делают это в одном месте
function dataProviderFactory($http, $q) {

    return {
        getManufactures: getManufactures,
        getCategories: getCategories,
        getCategoryTree: getCategoryTree
    };

    function getManufactures () {
        var sql = 'SELECT * FROM audio.w8265_virtuemart_manufacturers_ru_ru';

        return exec(sql)
            .then(function (data) {
                return pluck(data, 'mf_name');
            }, repeatError);
    }

    function getCategories(pid) {
        var sql = 'SELECT virtuemart_category_id, category_name FROM audio.w8265_virtuemart_categories_ru_ru join audio.w8265_virtuemart_category_categories on virtuemart_category_id = category_child_id where category_parent_id = ' + (pid || 0);

        return exec(sql)
            .then(function (data) {
                return pluck(data, 'category_name');
            }, repeatError);
    }

    // а еще лучше уж тогда так:
    function getCategoryTree() {
        // get all categories
        var sql = 'SELECT virtuemart_category_id as id, category_name, category_parent_id as parent_id FROM audio.w8265_virtuemart_categories_ru_ru join audio.w8265_virtuemart_category_categories on virtuemart_category_id = category_child_id';

        return exec(sql)
            .then(function (categories) {

                return getChildren(categories);

                // простенький рекурсивный обход дерева
                function getChildren(collection, pid) {
                    pid = pid || 0;

                    return collection.filter(function (item) {
                        return item.parent_id == pid;
                    }).map(function (category) {

                        return {
                            name: category.category_name,
                            children: getChildren(collection, category.id)
                        }
                    });
                }
            }, repeatError);
    }

    // я думаю не стоит даже говорить насколько это плохо....
    // я надеюсь что никто не увидит эту систему кроме как менеджеры какие-нибудь...
    // ибо это нехилая такая дыра в безопасности
    // да и вообще стремно
    function exec(sql) {

        return $http
            .get('/ajax/index.php')
            .then(function (response) {
                // а если вы на сервере укажите Content-type application/json
                // Angular будет делать вам это автоматом
                return angular.fromJson(response.data);
            }, repeatError);
    }

    function repeatError(reason) {
        return $q.reject(reason)
    }

    function pluck(collection, key) {

        return collection.map(function (item) {
            return item[key];
        });
    }
}

// чистенький контроллер
function SearchController (dataProvider) {
    var vm = this;

    dataProvider.getCategoryTree().then(function (tree) {

        vm.categories = tree;
    });
}

ну и да. используйте controller as синтаксис:

<div ng-controller="SearchController as search">
    <ul>
       <li ng-repeat="item in search.tree">
</div>

короче мысль простая - вам вообще не нужно было дергать этот метод контроллера или вообще делать его.

еще одно замечание, вы сделали просто ужасные штуки в контроллере и приэтом еще и используете track by явно не понимая что это такое и зачем оно надо.

Comments

[shipovalovyuriy]

Есть какая-нибудь альтернатива моему решению?

[Сергей Протько]

shipovalovyuriy: обновил ответ

[shipovalovyuriy]

Спасибо большое! я начинающий в этом деле

Answer 2

[_ _]

Проблема тут
{{getChildList(cat[0])}}

Comments

[shipovalovyuriy]

да я понял что тут:) модель постоянно меняется в цикле и ангуляр на это ругается. Вот и спрашиваю как можно устранить