...

Notes on Directives

Refresh Button

The refresh button is declared something like this:

<div class="refresh" ng-class="{active: autoRefresh}"
     icon icon-size="36" icon-id="refresh"
     tooltip tt-msg="autoRefreshTip"
     ng-click="toggleRefresh()"></div>

ng-class="{active: autoRefresh}"

The ng-class directive is provided by Angular and adds the specified class to the element if the condition is true. In this case, if the autoRefresh boolean (defined on our controller scope) is true, then the active class is applied to the <div> element.

icon icon-id="refresh" icon-size="36"

The icon directive injects an icon with the given icon-id into the <div> element. icon-size="36" is the recommended size for table button icons.

If you really want to get into the guts of the code, see the definition of the icon directive in icon.js.

tooltip tt-msg="autoRefreshTip"

The tooltip directive uses the string stored on the scope variable autoRefreshTip to populate a tooltip when the mouse hovers over the button.

ng-click="toggleRefresh()"

The ng-click directive, provided by Angular, invokes the toggleRefresh() function (defined on our scope) when the user clicks on the <div> element.

Notes on Main Table

onos-table-resize

...