« »
10/02/2013

How to do one-time expression evaluation of HTML5 data-* attributes in AngularJS

There are no easy way to do a one-time expression evaluation with AngularJS. The easiest way would be to code a directive but it's most of the time better to not reinvent the wheel.

Bindonce is a small library for AngularJS that provides one-time evaluation (thus zero watchers) for AngularJS. Since Bindonce 0.2+, it's now possible to evaluate any kind of attributes thanks to bo-attr-*.

Let's say we use bootstrap and want to specify dynamically some content generated by JavaScript inside our popover. Using bindonce we just have to write

<div bindonce ng-controller="MyCtrl">

  <div bo-attr 
       bo-attr-data-content="content" 
       bo-attr-data-html="isHtml" 
       bo-attr-data-title="title" 
       bo-attr-data-placement="placement" 
       data-toggle="popover">
    <i class="icon icon-question-sign"></i>
  </div>

</div>

Title, isHtml and content will be evaluated only one time and put inside attr-data-* attributes. From this point we could write our own directive to abstract the creation of our bootstrap popover but that's another story.
« »
 
 
Made with on a hot august night from an airplane the 19th of March 2017.