While Integrating AngularJS and webix, can we use both techniques mentioned on webixsite for initing

Webix JS
1

I am trying to integrate AngularJS with webix.
My Page has multiple accordion items, so i want different div sections for each item and init that div from different angular controller meant for each accordion item. For this I have to use both techniques for initing : Initing from HTML markup and Initing from a JS configuration object.
But its not working.
if anybody knows how to do this, please help me.

code::::

html :::

<div webix-ui view="cols" type="line" width="1300">
			<div view="rows">
				<!-- row containing header items  -->
				<div webix-ui="config" webix-ready="loadButtons(root)" id='buttonsDiv' data-ng-controller="ButtonsController" height="40"></div>

				<!-- row containing accordion items  -->
				<div></div>
			</div>
		</div>

Controller :::

createQuoteApp
		.controller(
				"ButtonsController",
				function($scope) {

					// config object
					$scope.config = {
						isolate : true,
						body : {
							container : "areaA",
							view : "toolbar",

							elements : [
									{
										view : "label",
										value : 'Create',
										width : 70
									},
									{
										view : "toolbar",
										elements : [ {
											view : "button",
											value : "Save",
											width : 45,
											css : "tbEmailThread",
											type : "image",
											inputHeight : 11,
											label : "Save",
											click : "closeWindow"
										} ],
										css : "my_toolbar_custom",
										width : 805
									}
							],
							css : "my_toolbar",
						}
					};
					
					// function
					$scope.loadData = function(root) {};
					

				});
2

Sry guys, I think page is not displaying html div elements so following is the html :

..div webix-ui view="cols" type="line" width="1300"..
			..div view="rows"..
				<!-- row containing header items  -->
				..div webix-ui="config" webix-ready="loadButtons(root)" id='buttonsDiv' data-ng-controller="ButtonsController" height="40".. ../div..

				<!-- row containing accordion items  -->
				..div.. ../div..
			../div..
		../div..
3

Could you make a snippet: http://webix.com/snippet/

Would be quite helpful to see your example of AngularJS integration :slight_smile:

4

There are few unnecessary elements in $scope.config ( container, body, inputHeight )
After removing them - code mostly works http://webix.com/snippet/b76f08d6

The second issue with above code - mixing two ways of initialization. It somehow works, but auto-sizing between inner and outer parts of UI is broken.

5

Thanks a lot guys