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

4 posts, 0 answers
  1. Jean-brice
    Jean-brice avatar
    2 posts
    Member since:
    May 2014

    Posted 08 May 2014 Link to this post

    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
  2. Mihai
    Admin
    Mihai avatar
    153 posts

    Posted 09 May 2014 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Jean-brice
    Jean-brice avatar
    2 posts
    Member since:
    May 2014

    Posted 10 May 2014 in reply to Mihai Link to this post

    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
  5. Mihai
    Admin
    Mihai avatar
    153 posts

    Posted 11 May 2014 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready