Create og-currency directive

[scottohara]

(Not to be confused with og-input-currency, which is an input field that accepts/displays currency values).

In a number of views (e.g. 3 x instances in the accounts index alone), we display currency values using markup similar to the following:

<td class="amount" ng-class="::{'text-danger': amount < 0}">{{::amount | currency}}</td>

The outer tag can differ (e.g. <td> vs <th>), and the model value can differ (e.g. account.closing_balance vs accountType.total vs vm.netWorth), but there is some commonality repeated each time:

• General styling (class="amount")
• Conditional styling of negative amounts (ng-class="::{'text-danger': x < 0}")
• Use of angular's currency filter ({{::x | currency}})

We should consider creating a directive that encapsulates these common traits of currency display to simplify the markup and remove the duplication.

e.g.

<th og-currency="vm.netWorth">Total: </th>

The directive would apply the general & conditional currency styles to the outer tag; and append {{:: x | currency}} to the element's text content (where x is the value passed as the directive attribute).

[scottohara]

Sometimes we have $0.00 amounts with the text-danger class being applied, because the underlying value is actually -0 (negative zero).

The ng-class expression should be ng-class="::{'text-danger': x < -0}"