angular controller inside webix

Webix JS
#1

Hi team,

I want to call the angular controller inside webix. is it possible?
sorry I am writting code here beacuse I tried to create the snippet but I am not geting the exact url.

view: "tabview",
height:750,
cells: [
    {
	  header: "Tab1",
	   body: {
	     id: "listView",
	     template:"<div ng-controller='FormController'><p>Tab1</p></div>",
	  }
    },
    {
	 header: "Tab2",
	 body: {
	     id: "formView",
	     template:"<div ng-controller='GridController'><p>Tab2</p></div>",
	  }
    }
]

Thanks,
Mira Karale

#2

https://webix.com/snippet/fad1da26
Url

#3

Hi,
Here I write the angular code
https://webix.com/snippet/04d19fd5

#4

Hi team,
Please reply me.

#5

Hello,

The ‘FormController’ and ‘GridController’ controllers are not used in your application yet. They should be defined for some template to come into action.

<div ng-app="webixApp">   
  <div  ng-controller="tabController">
    <div id="grid" webix-ui="tab_config"></div>
  </div>
  <div ng-controller="GridController">
    <div id="grid" webix-ui="grid_config"></div>
  </div>
</div>

Please, check the following snippet: https://webix.com/snippet/cb8e0e26

But normally, there’s one controller for Webix app and the whole application config is rendered within one template (DIV container).

#6

Hi Helga,
Thanks for reply.
But I want the grid inside tab body with gridController. gridControllershould get called from webix tab body template not from seperate html.

Thanks

#7

Hi Meera,

It is a not a good practice to initialize Webix views (form, grid) in the containers created by other Webix views (tabview cells) because it would break the whole auto sizing logic within the application.

But if you still need to do it, you will face a common Angular problem - controllers cannot be automatically called for dynamic DOM elements, and the HTML elements you specify for Tabview cells are dynamic in essence.

There’re a lot of ways to call controllers for dynamically added DOM elements (you can search for them in the Internet), but Webix can save you here by the content property of its Template view. It allows rendering the contents of a visible HTML element within the template:

<div ng-app="webixApp">
  <div  ng-controller="tabController">
    <div  webix-ui="tab_config"></div>
  </div>
  <div ng-controller="GridController"> 
    <div id="grid" class="childview" webix-ui="grid_config"></div>
  </div>
  <div ng-controller="FormController"> 
    <div id="form"  class="childview" webix-ui="form_config"></div>
  </div>
</div>  

{ header: "Tab1", body: { id: "listView",  content:"form"   }},
{ header: "Tab2", body: {  id: "formView",  content:"grid" }}

So, HTML containers for grid and form are visible initially, Angular calls the controllers for them, and these containers are appended to the templates within the Tabview.

But you will also need to provide the keepViews setting for the inner Multiview of the Tabview, so that all the cells are appended to the DOM at once. Normally, Tabview renders only the cell that is visible at the moment.

And, you will also have to resize the inner view (form, grid) to adjust it to the parent cell. As I’ve stated above, such pattern breaks the auto sizing, so you will have to do it manually.

Please, check the following snippet for details: https://webix.com/snippet/e8dcf81d