This is a migrated thread and some comments may be shown as answers.

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

3 Answers 167 Views
Window
This is a migrated thread and some comments may be shown as answers.
Jean-brice
Top achievements
Rank 1
Jean-brice asked on 08 May 2014, 03:01 PM
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

3 Answers, 1 is accepted

Sort by
0
Mihai
Telerik team
answered on 09 May 2014, 11:51 AM
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 documentationAngular-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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Jean-brice
Top achievements
Rank 1
answered on 10 May 2014, 08:30 PM
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
0
Mihai
Telerik team
answered on 11 May 2014, 09:11 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Window
Asked by
Jean-brice
Top achievements
Rank 1
Answers by
Mihai
Telerik team
Jean-brice
Top achievements
Rank 1
Share this question
or