|
1 | | -#Ignite UI directives for AngularJS (Preview) |
| 1 | +#Ignite UI directives for AngularJS (Preview) |
2 | 2 | Use the directives found in `igniteui-angular.js` to use [Ignite UI](http://igniteui.com) controls in [AngularJS](http://angularjs.com) pages. [Work with the running samples here](http://igniteui.github.io/igniteui-angular). |
3 | 3 |
|
4 | 4 | #Requirements |
@@ -50,22 +50,23 @@ Each control implements a custom tag directive where the tag name is formed by s |
50 | 50 | **Note**: It is recommended to use closing tags (`</ig-combo>`) over the self-closing tags (`<ig-combo/>`), because the latter are known to make issues on some browsers (depending on the used document mode). |
51 | 51 |
|
52 | 52 | #### Examples: |
53 | | - |
54 | | -- igCombo → `<ig-combo>` |
55 | | -- igGrid → `<ig-grid>` |
56 | | -- igDataChart → `<ig-data-chart>` |
57 | | -- igDialog → `<ig-dialog>` |
58 | | -- igDateEditor → `<ig-date-editor>` |
59 | | -- igEditor → `<ig-editor>` |
60 | | -- igMaskEditor → `<ig-mask-editor>` |
61 | | -- igNumericEditor → `<ig-numeric-editor>` |
62 | | -- igPercentEditor → `<ig-percent-editor>` |
63 | | -- igTextEditor → `<ig-text-editor>` |
64 | | -- igDatePicker → `<ig-date-picker>` |
65 | | -- igTree → `<ig-tree>` |
66 | | -- igMap → `<ig-map>` |
67 | | -- igUpload → `<ig-upload>` |
68 | | -- igVideoPlayer → `<ig-video-player>` |
| 53 | +Control Name | Tag |
| 54 | +--- | --- |
| 55 | +igCombo | `<ig-combo>` |
| 56 | +igGrid | `<ig-grid>` |
| 57 | +igDataChart | `<ig-data-chart>` |
| 58 | +igDialog | `<ig-dialog>` |
| 59 | +igDateEditor | `<ig-date-editor>` |
| 60 | +igEditor | `<ig-editor>` |
| 61 | +igMaskEditor | `<ig-mask-editor>` |
| 62 | +igNumericEditor | `<ig-numeric-editor>` |
| 63 | +igPercentEditor | `<ig-percent-editor>` |
| 64 | +igTextEditor | `<ig-text-editor>` |
| 65 | +igDatePicker | `<ig-date-picker>` |
| 66 | +igTree | `<ig-tree>` |
| 67 | +igMap | `<ig-map>` |
| 68 | +igUpload | `<ig-upload>` |
| 69 | +igVideoPlayer | `<ig-video-player>` |
69 | 70 |
|
70 | 71 | ### Configuring Control Options |
71 | 72 | Simple type control options (`string`, `number`, `bool` etc.) are configured as an attributes on the control element. The options follow the same naming convention logic as the tag name. |
@@ -98,22 +99,23 @@ Binding to control events is done again with attributes. Event attribute names a |
98 | 99 | Each control also implements a custom attribute directive where the attribute name is formed by splitting each capital letter in the control name with the `-` symbol (this naming convention follows the standard Angular normalization process) and the attribute value corresponds to the scope object holding the control options. |
99 | 100 |
|
100 | 101 | #### Examples: |
101 | | - |
102 | | -- igCombo → `<div id="combo" data-ig-combo="combo_options"></div>` |
103 | | -- igGrid → `<table id="grid" data-ig-grid="grid_options"></table>` |
104 | | -- igDataChart → `<div id="chart" data-ig-data-chart="data_chart_options"></div>` |
105 | | -- igDialog → `<div id="dialog" data-ig-dialog="dialog_options"></div>` |
106 | | -- igDateEditor → `<input id="dialog" data-ig-date-editor="date_editor_options"></input>` |
107 | | -- igEditor → `<input id="editor" data-ig-editor="editor_options"></input>` |
108 | | -- igMaskEditor → `<input id="editor" data-ig-mask-editor="mask_editor_options"></input>` |
109 | | -- igNumericEditor → `<input id="editor" data-ig-numeric-editor="numeric_editor_options"></input>` |
110 | | -- igPercentEditor → `<input id="editor" data-ig-percent-editor="precent_editor_options"></input>` |
111 | | -- igTextEditor → `<input id="editor" data-ig-text-editor="text_editor_options"></input>` |
112 | | -- igDatePicker → `<input id="editor" data-ig-date-picker="date_picker_options"></input>` |
113 | | -- igTree → `<ul id="tree" data-ig-tree="tree_options"></ul>` |
114 | | -- igMap → `<div id="map" data-ig-map="map_options"></div>` |
115 | | -- igUpload → `<div id="upload" data-ig-upload="upload_options"></div>` |
116 | | -- igVideoPlayer → `<div id="video" data-ig-video-player="video_options"></div>` |
| 102 | +Control | Markup |
| 103 | +--- | --- |
| 104 | +igCombo | `<div id="combo" data-ig-combo="combo_options"></div>` |
| 105 | +igGrid | `<table id="grid" data-ig-grid="grid_options"></table>` |
| 106 | +igDataChart | `<div id="chart" data-ig-data-chart="data_chart_options"></div>` |
| 107 | +igDialog | `<div id="dialog" data-ig-dialog="dialog_options"></div>` |
| 108 | +igDateEditor | `<input id="dialog" data-ig-date-editor="date_editor_options"></input>` |
| 109 | +igEditor | `<input id="editor" data-ig-editor="editor_options"></input>` |
| 110 | +igMaskEditor | `<input id="editor" data-ig-mask-editor="mask_editor_options"></input>` |
| 111 | +igNumericEditor | `<input id="editor" data-ig-numeric-editor="numeric_editor_options"></input>` |
| 112 | +igPercentEditor | `<input id="editor" data-ig-percent-editor="precent_editor_options"></input>` |
| 113 | +igTextEditor | `<input id="editor" data-ig-text-editor="text_editor_options"></input>` |
| 114 | +igDatePicker | `<input id="editor" data-ig-date-picker="date_picker_options"></input>` |
| 115 | +igTree | `<ul id="tree" data-ig-tree="tree_options"></ul>` |
| 116 | +igMap | `<div id="map" data-ig-map="map_options"></div>` |
| 117 | +igUpload | `<div id="upload" data-ig-upload="upload_options"></div>` |
| 118 | +igVideoPlayer | `<div id="video" data-ig-video-player="video_options"></div>` |
117 | 119 |
|
118 | 120 | ## Two-way Data Binding |
119 | 121 | The following controls currently support two-way data binding: |
|
0 commit comments