Using NavBar with AngularJs and Transclusion

2 posts, 0 answers
  1. Steven
    Steven avatar
    2 posts
    Member since:
    Dec 2015

    Posted 03 Feb Link to this post

    I am trying an experiment with the Kendo UI Navbar and have run into a problem.

    I am new to AngularJS and to Kendo UI as well so I could be doing something dumb.

    I want to wrap the Navbar and encapsulate some of the 'fluff' in directives so when it comes to add the navigation bar to the page all I have to do is something like this.

    <my-navigation-bar>

         <my-navigation-item>Item One</my-navigation-item>

         <my-navigation-item>Item Two</my-navigation-item>

    </my-navigation-bar>

    I have created 2 directives.

     

    The first directive is for wrapping it NavBar body

    angular.module('myapp.navigation')
    .directive('myNavigationBar', function() {
             return {
                          restrict: 'E',
                          templateUrl: 'components/navigation/directives/navigationbar.html',
                          transclude: true,
                          replace:true,
                          template: '<div class="c-navigation-bar">' +
                                         ' <ul kendo-panel-bar k-options="panelBarOptions" ng-controller="MyCtrl" ng-transclude></ul>' +
                                         '</div>' }});

     

    The second directive is for the items

    angular.module('myapp.navigation')
       .directive('myNavigationItem', function() {
             return {
                           restrict: 'E',
                           replace: true,
                           template: '<li>' +
                                   '<a class="ng-scope" ui-sref="tools">' +       
                                   '<span class="myspecial-icon myspecial-icon-wrench myspecial-icon-lg" name="wrench" large=""></span> ' + 
                                   ' <span class="nav-label" ng-transclude></span></a></li>'
    });

     

    For the most part, it is working at least as far as how everything is being rendered. 

    The problem is the items are not associated with the NavBar.  The role (role="menuitem") isnt being added to the LI elements and none of the styles associated with the items work.  For example, the hover effects.  The items are just being displayed like normal LI elements.

    This is what gets rendered:

     

    <ul role="menu" tabindex="0" data-role="panelbar" class="ng-scope k-widget k-reset k-header k-panelbar" kendo-panel-bar="" k-options="panelBarOptions" ng-controller="MyCtrl" ng-transclude="">
        <li class="ng-scope k-item k-state-default k-first">
            <a class="ng-scope" ui-sref="tools">
                <span class="myspecial-icon myspecial-icon-wrench myspecial-icon-lg" name="wrench" large=""/>
                <span class="nav-label" ng-transclude="">
                    <span class="ng-scope">Item One</span>
                </span>
            </a>
        </li>
        <li class="ng-scope k-item k-state-default k-last">
            <a class="ng-scope" ui-sref="tools">
                <span class="myspecial-icon myspecial-icon-wrench myspecial-icon-lg" name="wrench" large=""/>
                <span class="nav-label" ng-transclude="">
                    <span class="ng-scope">Item Two</span>
                </span>
            </a>
        </li>
    </ul>

    The above doesnt work.

    If I just put the LI items in the template for the myNavigationBar and remove this is what is rendered and it works just as I would expect:

    <ul ng-controller="MyCtrl" k-options="panelBarOptions" kendo-panel-bar="" class="ng-scope k-widget k-reset k-header k-panelbar" data-role="panelbar" tabindex="0" role="menu">
        <li class="k-item k-state-default k-first" role="menuitem">
            <a ui-sref="tools" class="ng-scope k-link k-header">
                <span large="" name="wrench" class="myspecial-icon myspecial-icon-wrench myspecial-icon-lg"></span>
                <span class="nav-label">Item One</span>
            </a>
        </li>
        <li class="k-item k-state-default k-last" role="menuitem">
            <a ui-sref="tools" class="ng-scope k-link k-header">
                <span large="" name="wrench" class="myspecial-icon myspecial-icon-wrench myspecial-icon-lg"></span>
                <span class="nav-label">Item Two</span>
            </a>
        </li>
    </ul>

    So, any ideas why, when using transclusion for the individual NavBar items as well as the main item, that the items are not correctly associated with the navbar? 

     

  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 08 Feb Link to this post

    Hello Steven,

    from what I see, the problem is most likely due to the navigation items markup being inserted in the DOM after the panelbar directive has been instantiated. The panelbar has no means to detect the items and enhance them accordingly. 

    A similar problem has been discussed in the following documentation article - the underlying issue is basically the same. In general, you should be able to apply the same logic from there. Alternatively (and this is what I would actually recommend), you may use the jQuery plugin syntax and instantiate the panelbar in the directive link callback. 

    Regards,
    Petyo
    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
Back to Top