angular1 - angular.js:11655 RangeError: Maximum call stack size exceeded

Question

I have a directive that has a controller with a $http call to an endpoint. I'd like to take the results of that server call and then display them in my template. If I have a single value inside my template, and then set it explicitly, it all works fine. If I try to bind the template to the server call then I get the error mentioned above. Do I need to use the $compile service for this to work?

thanks in advance

Final result with compilation

function mydirective(myservice,$compile) {

    return {
        restrict: 'ACE',
        scope: {
            url: '=',
            title: '=',
        },

        controllerAs: 'ctrl',
        bindToController: true,
        controller: ['$scope', function($scope) {
            myservice.init('http://jsonplaceholder.typicode.com/posts')
                .then(function(data) {
                    $scope.postRequest(data);
                });
            $scope.postRequest = function(val) {
                this.items = val;
                this.title = val[0].title;
            };
        }],
        link: function ($scope, $el, $attr  ) {

            var template = '<div class=\"test\">{{this.title}}</div>' +
                '<div class=\"tes\" ng-repeat=\"item in this.items\">'+
                '<div class=\"test1\">{{item.title}}</div>'+
                '</div>';

            var e = $compile(template)($scope);
            $el.after(e);
        }
    };
}

This post can tell you what that error means: stackoverflow.com/questions/22123769/…. You do not have to compile in this instance though. An example of when you might compile is say you did a GET request which returned some template...then you would need to manually compile it. — terpinmd
– terpinmd, Commented Jun 17, 2016 at 21:21
so essentially I need to push the results on to an array. How do I manually compile to see the values? — Jimi
– Jimi, Commented Jun 17, 2016 at 21:48
you are mixing $scope and controllerAs in the same directive, and this will generally lead to cases of confusion. In particular, the this object inside the $scope.postRequest function is not a reference to the controller. Also, in your template, you should be using ctrl instead of this. — Claies
– Claies, Commented Jun 18, 2016 at 3:07
you actually don't need a link function at all in your directive; I'm going to refactor the directive for you in an answer. — Claies
– Claies, Commented Jun 18, 2016 at 3:09

Claies · Accepted Answer · 2016-06-18 03:25:01Z

Here is a refactored version of your directive. Because you are using controllerAs, the reference to $scope can be removed entirely. Also, a variable ctrl is created as an alias to the controller, for consistent access to the controller from inside callback functions. Finally, the link function is removed and the template has been adjusted to reference ctrl instead of this.

The error

RangeError: Maximum call stack size exceeded

is a result of using this in the template, which is referring to the DOM rather than the controller, in conjunction with $compile, essentially compiling the DOM into itself.

function mydirective(myservice, $compile) {

  return {
    restrict: 'ACE',
    scope: {
      url: '=',
      title: '=',
    },
    controllerAs: 'ctrl',
    bindToController: true,
    controller: function() {
      var ctrl = this; //alias reference for use inside controller callbacks
      myservice.init('http://jsonplaceholder.typicode.com/posts')
        .then(function(data) {
          ctrl.postRequest(data);
        });
      ctrl.postRequest = function(val) {
        ctrl.items = val;
        ctrl.title = val[0].title;
      };
    },
    template: '<div class=\"test\">{{ctrl.title}}</div>' +
      '<div class=\"tes\" ng-repeat=\"item in ctrl.items\">' +
      '<div class=\"test1\">{{item.title}}</div>' +
      '</div>'
  };
}

Please note this code hasn't been tested.

Collectives™ on Stack Overflow

angular1 - angular.js:11655 RangeError: Maximum call stack size exceeded

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related