One-time binding will rebind with ng-if
This fiddle is to prove that a one-time binding is reevaluated when coupled with an ng-if, specifically when the HTML is added back to the DOM.
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css">
<!--
The purpose of this fiddle is simple. The new AngularJS 1.3 one-time bindings are awesome. However, what if I want to leverage the one-time bindings with say inline editing of a large list? How can I get those one-time bindings to refresh after the user saves their changes?
This fiddle proves the hypothesis that if the element is removed from the DOM leveraging an ng-if and then readded to the DOM later that the "Value stabilization algorithm" would have to execute at least once to get a stable value. That means that when executed it would find the updated values on the model. This also means that you can still benefit from the savings of the one-time bindings.
To test this fiddle do the following:
1. Change the value in the text box. Take note that the one-time binding remains.
2. Click the "Hide it!" button.
3. Change the value in the text box.
4. Click the "Show it!" button. Take note that the one-time binding has the new value.
--->
<div ng-app="app">
<div ng-controller='ctrl'>
<!-- Standard two-way binding. -->
<input ng-model='val' />
<!-- Standard one-way binding. -->
<div>{{val}}</div>
<!-- AngularJS 1.3 one-time binding. -->
<div ng-if='!hide'>{{::val}}</div>
<!-- Button to hide one-time binding control. -->
<button ng-click='hide = !hide'>{{hide ? 'Show it!' : 'Hide it!'}}</button>
</div>
</div>
CSS
body {
margin: 1em;
}
input, div, button {
margin: 0.5em;
}
JavaScript
var app = angular.module('app', []);
app.controller('ctrl', function ($scope) {
$scope.hide = false;
$scope.val = 'Tester';
});