angularjsng-bind-html

how to force angular to re-bind/update even there is no change in the model


Ok -- so you might be thinking why would you want this but I am trying to render some HTML using ng-html-bind like so (in HAML):

#my-visualization-panel{'ng-bind-html' => 'htmlSource'}

the htmlSource has some html which renders a visualization using c3.js visualization library. The htmlSource looks something like this

<script>
  var MY_DATA = localStorage.getItem('MY_DATA');
  c3.generate({
    data: {
      columns: MY_DATA
    }
 });
</script>

So the problem is that I update the visualization by re-setting localStorage['MY_DATA']. However, while the data that MY_DATA refers to might change, the actual htmlSource does not, so the view fails to update.

Is there a way to force the view to update even if the model, ostensibly, does not?


Solution

  • I would recommend changing the HTML anyway. For example

    <script>
      var MY_DATA = localStorage.getItem('MY_DATA');// 2482486284968248968 (hash of my_data, guid, or serial number)
      c3.generate({
        data: {
          columns: MY_DATA
        }
     });
    </script>
    

    This will allow your script to operate as you expect, directly, without having to do big sweeping updates or hacks. Even if you "force a refresh", if the HTML doesn't change, Angular will not re-execute your script.

    Another possibility is to call localStorage.getItem('MY_DATA') in your angular controllers / directives, instead of indirectly hoping Angular will run it for you via HTML updates. That seems to be the kind of control you're looking for.