CREATE & UPDATE USE CASES
USER INTERFACE EVENTS & OPTIONS
ORGANIZATIONAL CHART LAYOUT OPTIONS
FAMILY DIAGRAM LAYOUT USE CASES
ITEM TEMPLATE USE CASES
Current Version: 5.6.3
AngularJS Organizational Chart directive example
This example demonstrates how Organizational Chart Control can be wrapped into AngularJS directive. It demonstrates implementation of the following features:
- Destroy - AngularJS directoive has to destroy control otherwise its event handlers would stay bound to placeholder DOM element.
- Update Mode - in order to render control faster, directive should reuse existing control and use appropriate update method for changing cursor, highlight or full widget contents refresh.
- Events looping - directive watches for scope properties and updates widget, so we have to avoid infinite update loops when we apply changes from control back to its scope object.
- ItemTemplate - directive uses AngularJS templates and it shares items scopes between application and control.
- Buttons - by default, control uses regular HTML buttons, in case of AngularJS we have to customize item and cursor templates to use AngularJS buttons.
Have questions? Ask for help on Github.