在 angularjs 自定义指令中使用时，ui-view 不起作用 [英] ui-view doesn't work when used inside angularjs custom directives

问题描述

我想在自定义 angularjs 指令中包装一些 ui-view 元素

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>'
    };
});

查看演示 Plunker

似乎 ui-view 不喜欢被包装，因为当我删除包装元素时，演示工作没有问题.这是 ui-router 中的错误还是我做错了什么?

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?

更新:

显然这是一个已知问题.问题 774 和问题 886

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

推荐答案

很抱歉回答我自己的问题，但是在翻阅了 angular-ui-router 已知问题和源代码之后，我发现问题出在最新版本上angular-ui-router (0.2.8) 如此处所述一>.下面的演示使用了 0.2.7 版本，没有提到的问题.也许这对其他人有用

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

这篇关于在 angularjs 自定义指令中使用时，ui-view 不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！