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:
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.