CODEWITHSUNDEEP
angularjshtmldrywall
Haris Hashim
Haris Hashim

Reputation: 55

ng-repeat causing infinite loop in controller. Setting breakpoint show controller code executed infinitely

I am using Angular-Drywall and ngCart. Not very expert with this Angular and JS thing :D.

This is my html from template (main.tpl.html)

<div class="col-xs-3" ng-repeat="item in products">
            <div class="thumbnail">
                <img ng-src="{{ item.imageUrl }}">
                <h4>{{ item.name }}</h4>
                <p>{{ item.snippet }}</p>
                <h3 class="price">{{ item.name.length*10-.01 | currency}}</h3>
                <ngcart-addtocart id="{{ item.id }}"
                           name="{{ item.name }}"
                           price="{{ item.name.length*10-.01  }}"
                           data="item"
                           quantity="1"
                           quantity-max="30">
                    Add To Cart
                </ngcart-addtocart></div>
</div>

And this is my controller

angular.module('app').controller('AppCtrl', ['$http', '$scope', 'i18nNotifications', 'localizedMessages', 'ngCart',
    function ($http, $scope, i18nNotifications, localizedMessages, ngCart) {

        ngCart.setShipping(15.00);
        ngCart.setTaxRate(13);

        $http({method: 'GET', url: 'data/phones.json'})
                .success(function (data, status, headers, config) {
                    $scope.products = data;
                    console.log(data);
                    console.log("LOOP!");
                })
                .error(function (data, status, headers, config) {
                    // called asynchronously if an error occurs
                    // or server returns response with an error status.
                    console.log("ERROR!");
                });

        $scope.notifications = i18nNotifications;

        $scope.removeNotification = function (notification) {
            i18nNotifications.remove(notification);
        };

        $scope.$on('$routeChangeError', function (event, current, previous, rejection) {
            i18nNotifications.pushForCurrentRoute('errors.route.changeError', 'error', {}, {rejection: rejection});
        });
    }]);

I have confirmed ng-repeat is the root cause because removing that code means everything is peachy and no infinite loop.

I have also verify that products is a valid array.

What happen is that, with the html code, the controller keep reloading and executing, consuming resources until Chrome finally ask me to kill it.

Appreciate help. Have been troubleshooting this without much progress few hours now!

EDIT:

The different between working ngCart sample is (using stateProvider and ui.router library)

<div class="container">
    <div ui-view></div>

    <!-- /.container -->
</div>

while my non working code use this (using routeProvider)

<div class="page">
    <div ng-view class="container"></div>
</div>

Code from index.html, showing where the template is inserted. Working one is using ui-view while the non working one is using ng-view.

If this is the reason, appreciate it if someone can explain why.

Upvotes: 0

Views: 242

Answers (1)

Tonio
Tonio

Reputation: 5014

A problem I had in the past that seems related to your issue: If you include whatever directive that access a template through "templateUrl" but for some reasons, angular can't resolve the templateUrl of this directive, by default it will return the template for index.html which will contain again your directive and because the templateUrl for the directive is not found, it default again to index.html

and so on....

This is most likely your issue here

Upvotes: 1

Related Questions