ui-view doesn't work when used inside angularjs custom directives

Question

I want to wrap some ui-view elements inside a custom angularjs directive

<wrapper>
    <ul>
      <li><a ui-sref="route1">Route 1</a></li>
      <li><a ui-sref="route2">Route 2</a></li>
    </ul>

    <div class="well" ui-view="viewA"></div>        
    <div class="well" ui-view="viewB"></div>        
</wrapper>

The custom directive does nothing but transcluding the content:

myapp.directive('wrapper', function($compile){
    return {
        restrict: 'E',
        replace: true,
        transclude:true,
        template: '<div class="godWrapper" ng-transclude></div>'
    };
});

See the demo in Plunker

It seems that ui-view doesn't like to be wrapped as when I remove the wrapper element the demo works with no problem. Is this a bug in ui-router or am I doing something wrong?

UPDATE:

Apparently this is a known issue. Issue 774 and Issue 886

Mehrad Sadegh · Accepted Answer · 2014-03-11 06:38:41Z

6

Sorry to answer my own question, but after some diving through angular-ui-router known issues and source code, I found that the problem is with the latest release of angular-ui-router (0.2.8) as discussed in here. The following demo is utilising the 0.2.7 release without the mentioned problem. Perhaps this will be useful for someone else

http://plnkr.co/edit/u2LE7gFUGSpAmUNK3fhP?p=preview

edited Mar 11, 2014 at 6:38

answered Feb 24, 2014 at 23:53

Mehrad Sadegh

1,14411 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Roger Over a year ago

It's ok to answer your own questions. stackoverflow.com/help/self-answer it is not merely OK to ask and answer your own question, it is explicitly encouraged

Collectives™ on Stack Overflow

ui-view doesn't work when used inside angularjs custom directives

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related