Contains AngularJS directives for the Wijmo controls.

The directives allow you to add Wijmo controls to AngularJS applications using simple markup in HTML pages.

You can use directives as regular HTML tags in the page markup. The tag name corresponds to the control name, prefixed with "wj-," and the attributes correspond to the names of control properties and events.

All control, property, and event names within directives follow the usual AngularJS convention of replacing camel-casing with hyphenated lower-case names.

AngularJS directive parameters come in three flavors, depending on the type of binding they use. The table below describes each one:

@

By value, or one-way binding. The attribute value is interpreted as a literal.

=

By reference, or two-way binding. The attribute value is interpreted as an expression.

&

Function binding. The attribute value is interpreted as a function call, including the parameters.

For more details on the different binding types, please see Dan Wahlin's blog on directives. The documentation does not describe directive events because they are identical to the control events, and the binding mode is always the same (function binding).

To illustrate, here is the markup used to create a ComboBox control:

<wj-combo-box 
  text="ctx.theCountry"
  items-source="ctx.countries"
  is-editable="true"
  selected-index-changed="ctx.selChanged(s, e)">
</wj-combo-box>

Notice that the text property of the ComboBox is bound to a controller variable called "ctx.theCountry." The binding goes two ways; changes in the control update the scope, and changes in the scope update the control. To initialize the text property with a string constant, enclose the attribute value in single quotes (for example, text="'constant'").

Notice also that the selected-index-changed event is bound to a controller method called "selChanged," and that the binding includes the two event parameters (without the parameters, the method is not called). Whenever the control raises the event, the directive invokes the controller method.

All Wijmo Angular directives include an "initialized" event that is raised after the control has been added to the page and initialized. You can use this event to perform additional initialization in addition to setting properties in markup. For example:

<wj-flex-grid initialized="initGrid(s,e)">
</wj-flex-grid>

// controller
$scope.initGrid: function(s, e) {

  // assign a custom MergeManager to the grid
  s.mergeManager = new CustomMergeManager(s);

}