ng-when

Angular module that provide directive to execute code when a condition is validated directly from your views


Keywords
angular, when, ng-when, olivierbossel
License
MIT
Install
bower install ng-when

Documentation

ng-when (1.0.3)

Angular module that provide directive to execute code when a condition is validated directly from your views. It provide also a quick and cool solution to init jquery plugins only when all the needed datas are in your views

Get Started

First, you need to include the scripts and css in your page

<script src="angular.js"></script>
<script src="ng-when.js"></script>

Then you have to specify the "ngWhen" module as dependency of your angular app

var myApp = angular.module('myAwesomeApp', ['ngWhen']);

Finaly you can use the ng-when directive in your views

<!-- simple usage -->
<button ng-when="myCondition" ng-do="doSomething()">my cool button</button>

<!-- in case you have a list of hotels and you want a tooltip (with tooltipster jquery plugin) -->
<!-- the tooltipster read the title attribute so you need to be sure it's been populated before init the plugin -->
<button ng-when="hotel.tooltip"
    do-jquery-init="tooltipster"
    do-jquery-options="myOptionsObjectInController"
    title="{{ hotel.tooltip }}">
    My cool button        
</button>

See the index.html file for full sample

Directives

  • ng-when : REQUIRED : Store your condition
  • ng-when-do : Store what to do when the condition is validated
    • ng-do : Alias to ng-when-do
    • do : Alias to ng-when-do
  • ng-when-do-jquery-init : Store the name(s) (comma separated) of the jquery plugin that you want to init
    • ng-do-jquery-init : Alias to ng-when-do-jquery-init
    • do-jquery-init : Alias to ng-when-do-jquery-init
  • ng-when-do-jquery-options : Store the options to pass to the jquery plugin on init.
    • ng-do-jquery-options : Alias to ng-when-do-jquery-options
    • do-jquery-options : Alias to ng-when-do-jquery-options
  • ng-when-do-timeout : A timeout in ms to wait before executing the callback
    • ng-do-timeout : Alias to ng-when-do-timeout
    • do-timeout : Alias to ng-when-do-timeout

If multiple jquery plugins are specified (comma separated), each plugin options need to be scoped in the options object with the plugin name as property name

Thanks

This module is inspired by the module bindonce written by Pasquale Vazzana (thanks to him)