AngularJS ng-repeat one time binding a nested method call

Question

I am experimenting with AngularJS 1.3 (I just migrated my app from 1.2). I am playing with the new one-time binding. I have come across this case where it is not working, can someone please explain why? I am dynamically generating an id field by calling a method within the view. As a result, the one-time binding does not seem to be working. See http://plnkr.co/edit/GyfKKb?p=preview.

Specifically, I'm expecting the one-time to not re-render the ng-repeat when a new element is added to the array. But pushing a new element into the array (via button click) also makes the new element appear in the output of the ng-repeat.

index.html

<body ng-controller="MainCtrl">
  <!-- TODO: I would expect addItemC() to do nothing with one time binding -->
  <button ng-click="addItemC()">add</button>

  <div ng-repeat="itemC in ::itemsC">

    <!-- dynamically generate id that is cause breakage -->
    {{::itemC.id() | limitTo:3}}

  </div>      
</div>

app.js

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {

  // generate random string id dynamically (code taken from stackoverlow answer)
  var itemObj = {
    id: function makeid() {
      var text = "";
      var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

      for( var i=0; i < 100; i++ )
          text += possible.charAt(Math.floor(Math.random() * possible.length));

      return text;
    }
  };

  // one time binding does not work
  $scope.itemsC = [
    angular.copy(itemObj),
    angular.copy(itemObj),
    angular.copy(itemObj)
  ];
  $scope.addItemC = function() {
    $scope.itemsC.push(angular.copy(itemObj));
  }
});

This is a tricky problem. Here's a plunkr demonstrating that if you instantiate the array as empty instead of having a copied value, the array stays one-way bound plnkr.co/edit/jAf3NQOQGLMLMYk30tIa?p=preview — azium
– azium, Commented Jun 12, 2015 at 17:10
@azium Yes I noticed this, which leads me to believe at the empty state the one time binding is applied as the scope variable has 'settled'. So when the array is initiated not empty, it never 'settles' — user12121234
– user12121234, Commented Jun 12, 2015 at 17:17
@azium: I think if it is empty, the call to itemC.id() will return nothing since it is undefined. That is why it seems working. See my answer and see if that makes sense. — geckob
– geckob, Commented Jun 12, 2015 at 17:20

ShankarSangoli · Accepted Answer · 2015-06-12 19:08:30Z

2

I think it is because of exceeding number of $digest cycles inside the ng-repeat angular is throwing error. Mostly it is because of the for loop running for 100 iterations for every item.

If you change you logic to generate the id inside the controller and then give the item to ng-repeat to render then it works fine. Take a look at my plunkr

Demo http://plnkr.co/edit/4nFtOy1uGtDyUEWXCVbT?p=preview

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';

  // generate random string id dynamically (code taken from stackoverlow answer)
  function makeid() {
      var text = "";
      var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

      for( var i=0; i < 100; i++ )
          text += possible.charAt(Math.floor(Math.random() * possible.length));

      return text;
    }

  function getItem () {
    return {
      id: makeid()
    };
  }


  var itemObj = {
    id: makeid()
  };


  // one time binding does not work
  $scope.itemsC = [
    getItem(),
    getItem(),
    getItem(),
  ];
  $scope.addItemC = function() {
    $scope.itemsC.push(getItem());
  }

  $scope.removeItem = function(item) {
    var index = $scope.itemsC.indexOf(item);
    $scope.itemsC.splice(index, 1);
  }
});

Inside the markup change itemC.id() to itemC.id since id is now property.

edited Jun 12, 2015 at 19:08

answered Jun 12, 2015 at 17:03

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user12121234 Over a year ago

So one time binding a method nested inside the ng-repeat is not possible?

azium Over a year ago

I don't understand, you just removed the one-way binding.

ShankarSangoli Over a year ago

@wbeange: I didn't say that. You can very well do that. But the problem here is it is exceeding the number of digest cycles allowed by angular so it is throwing error.

ShankarSangoli Over a year ago

@azium: It removed it by mistake while playing around. I added it back now take a look plnkr.co/edit/4nFtOy1uGtDyUEWXCVbT?p=preview

azium Over a year ago

Ah okay. Can't change my downvote though unless you edit your answer! Silly Stack.

geckob · Accepted Answer · 2015-06-17 19:18:17Z

2

I think because you are one time binding the function and calling the function every time. Calling a function inside double curly braces will give whatever the function returns. The function remains the same by keep returning random strings.

So, one time binding actually works here by keep calling the same function. Note that the function does not change. I added new property which is not a function to the object to show you the one time binding actually works.

<div style="font-weight:bold;">itemsC:</div>
<div ng-repeat="itemC in ::itemsC">
  <div ng-click="removeItem(itemC)">
    <!-- dynamically generate id -->
    {{::itemC.name | limitTo:3 }}
  </div>
</div>
<div style="margin-top:10px;">{{itemsC}}</div>

http://plnkr.co/edit/T8KRafey7VJFbcAs4NLZ?p=preview

edited Jun 17, 2015 at 19:18

answered Jun 12, 2015 at 17:14

geckob

8,2085 gold badges36 silver badges43 bronze badges

1 Comment

geckob Over a year ago

@wbeange Is this makes sense? Any comment?

Collectives™ on Stack Overflow

AngularJS ng-repeat one time binding a nested method call

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related