This sample shows how to bind to Wijmo control events and integrate them with the Angular event broadcasting infrastructure.
The wijmo.angular module allows you to bind to control events by specifying the event handler as a value of the attribute corresponding to the control event name. You can specify any valid AngularJS expression as an event handler.
The expression may reference any controller scope properties, plus two additional variables:
The most basic form of an event handler is a function with sender and eventArgs parameters, like you use when you attach a handler in JavaScript code.
The example below attaches the controller scope's onValueChanged function to the InputNumber control's valueChanged event and shows a dialog with the new control value read from the InputNumber.value property:
In order to retrieve the new value in the example above, the event handler function in the controller must be familiar with the InputNumber control, which is a part of the view, and reads its value property to get the new value. You may not like this if you are trying for a true MVC approach and want the controller to know nothing about its view.
Fortunately, you can easily correct this. In the example below, the onValueChanged function is declared in the controller with the single newValue parameter, instead of the parameters referencing the control and its data, and the event expression in the markup uses the s.value expression to pass the new value itself, instead of the reference to the control.
AngularJS provides the event propagation and handling infrastructure represented by the $scope API methods: $emit, $broadcast, and $on. This API allows multiple controllers in the same page to exchange messages and behave as a single functional unit.
You can integrate Wijmo events into this infrastructure by calling the $emit or $broadcast method from the event handler function defined in the controller scope, or define such calls right in the event attribute on the control directive element, providing another event name agreed upon between controllers, and event data in the approved format.
In the example below, three controllers are organized in a hierarchical structure:
The companyCtrl and companyPricesCtrl controllers recognize the companyChanged event using the $scope.$on method and update their company and prices properties accordingly.
The Wijmo ListBox control, which is bound to the companyListCtrl.companies array, drives the whole unit. The selectedIndexChanged event handler of the control calls the AngularJS $emit and $broadcast methods, passing companyChanged as the event name and the new selected company as the event data, forcing the other two controllers to update their property values, which in turn causes the bound views to update.
The AngularJS event is triggered right from the event attribute in the markup:
selected-index-changed="$emit('companyChanged', s.selectedItem); $broadcast('companyChanged', s.selectedItem)"