Include kendo-window in angular js directive:Error: Multiple directives [contgoPopup, kendoWindow] asking for transclusion

[Jean-brice]

Hi,

I'm trying to build a directive which will display a kendo window with a kendo tab strip in its body content.
It's a component I need to be reusable since I use it a lot in my web app.

Here is the flat html representation that I want to turn into a directive

<div style="padding:20px;" kendo-window="test" id="test" k-title="hello"  k-options="popupOptions">
    <div kendo-tab-strip k-content-urls="[ null, null]">
      <!-- tab list -->
      <ul>
       <li class="k-state-active">View</li>
      <li>Edit</li>
     </ul>
     <div style="padding: 1em">
     This is the view tab
    </div>
     <div style="padding: 1em">
         This is the edit tab
   </div>
</div>
</div>

1) First step is creating the directive that wraps the kendo popup and this si where I'm having an issue
So basically, my directive includes the kendo-window widget  in its template and has transclude="true", since the content of the popup will different each time.
It seems "transclude" and "scope" cause some issues. 
Please have a look : http://plnkr.co/edit/B5nLJJvFQkNH24FEbHSS?p=preview

[Mihai]

Hi,

There are some problems with your sample.

- the versions of libraries that you linked to are badly outdated.

- there is no window.kendoWindow.  To construct a Window widget with Kendo you'd write $("#element").kendoWindow()

I'd suggest you to look at Kendo UI documentation, Angular-Kendo documentation and on writing AngularJS directives.

Any case, I wrote a sample directive for you, hope it helps: http://plnkr.co/edit/IuaEtQXIv1vDTes0FiS5?p=preview

Regards,
Mihai
Telerik

 

 

[Jean-brice]

Cheers for the example.

Just one thing though:
 I've added a variable in the directive to set the id's window from the controller.
1)However something seems wrong because when I try to get the window by id, it's always null so that I can't open it:
 $("#popuprule").data("kendoWindow")

2) Also it seems the content of the window transcluded doesn't have access to the scope of my controller since nothing is displayed
http://plnkr.co/edit/0vG2o8lmgzh0CT6yrW9j?p=preview

[Mihai]

Hi,

About the id, you need to write id="{{id}}" in your directive (only k-* attributes are automatically evaluated by angular-kendo; the rest is just html or plain Angular).  Here's the update: http://plnkr.co/edit/fz17UOfCeqWraElXPr6l?p=preview

About the scope, I followed up your Github ticket: https://github.com/kendo-labs/angular-kendo/issues/314#issuecomment-42765637

Regards,
Mihai
Telerik