angularjsinterpolationone-time-binding

Interpolate a one-time binding manually


How could I interpolate a one-time binding manually?

Here is my use case. I have a list of a lot of elements. The elements just sets of controls. I get the data for the elements from the BE. Then I would like to leverage the AngularJS interpolation and set the controls` values. But I would like to avoid the interpolation of all the elements every time I change only a single control.

So, I use a one-time binding to set the values, but then when I change them they are not updated.

The expected result in the example is that once something is typed in the control, the respective one-time binded value is updated. Also, the one-time binding should remain there, since in my real case there will be a lot of controls and I do not want to strain performance when only one control is interacted with. A simplified example of mine can be found here (in my real case I have not only inputs, but checkboxes as well, but I believe that the approach should be the same for them).

After a research I found out that a directive should be used in this case. But I was not able to find a simple to understand example. So, could someone post it here, please?

Different from a directive solutions are welcome here as well.


Solution

  • First to understand your problem: Why do you want to avoid the angular change detection here? The only reason that comes to my mind would be heavy performance problems.

    In one case here, there were one or two thousand of inputs, all with a binding. The application was a little sluggish, but still usable. We accepted this, as we had to re-implement all the binding manually otherwise.

    If your binding is rather simple (no validations, conversions, etc.) and the values are not shown on other places while being edited, maybe it would be a way for you to use an AngularJS directive on a native HTML Input element that just listens to its onChange event to save changed data and gets updated programmatically whenever you know it changed from outside (if it does at all).

    (Not talking about better using Angular, which has a much tighter grip on change detection ;-) ).