Currently, I am delving into the world of AngularJS 1.3 after migrating my application from 1.2. The new one-time binding feature caught my attention, and I decided to experiment with it. However, I encountered a situation where it doesn't seem to work as expected. Can someone enlighten me on why this is happening? In my scenario, I am dynamically generating an id field by invoking a method within the view. This seems to interfere with the functionality of the one-time binding. You can see the issue in action at http://plnkr.co/edit/GyfKKb?p=preview.
The specific problem arises when I anticipate that the one-time binding should not update the ng-repeat when a new element is added to the array. Surprisingly, pushing a new element into the array (via a button click) results in the new element showing up 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 causing the issue -->
{{::itemC.id() | limitTo:3}}
</div>
</body>
app.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
// dynamically generate a random string id (code snippet obtained from a Stack Overflow 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 not functioning correctly
$scope.itemsC = [
angular.copy(itemObj),
angular.copy(itemObj),
angular.copy(itemObj)
];
$scope.addItemC = function() {
$scope.itemsC.push(angular.copy(itemObj));
};
});