Javascript 导航栏中的下拉列表不展开（引导、角度、指令、路线）

出于某种奇怪的原因，当引导菜单下拉列表通过路由器模板构建时，它不会在单击时展开。直接在模板中使用，效果很好

这里是可以玩的plunker：

试验
var app=angular.module（'app'，['ngRoute'，'ctrls'）；
app.config（函数（$routeProvider）{
$routeProvider.when（“/menu”{
模板：“”，
控制器：“mainCtrl”
})。否则（{重定向到：'/menu'}）；
});
应用程序指令（'菜单'，函数（）{
返回{
限制：'E'，
模板：“”+
“
”+
“
”+
'    ' +
“
”+
“
”+
“
”+
'' +
''
};
});
angular.module（'ctrls'，[]）.controller（'mainCtrl'，function（）{}）；

它实际上是触发路由更改的下拉切换链接的href属性的“#”。如果删除href，则它可以工作：

但正如我所说：我不建议以这种方式结合angular和bootstrap。当混合它们的功能时，UI引导通常是更好的选择

app.directive('menu', function () {
    return {
        restrict : 'E',
        template : '<nav class="navbar navbar-default" role="navigation">' +
          '<ul class="nav navbar-nav">' +
          '  <li class="dropdown">' +

          // remove href = '#' here
          '    <a href class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>' +

          // probably not the worst idea to remove it here either, if not used otherwise
          '    <ul class="dropdown-menu"><li><a href="#">Action</a></li></ul>' +
          '  </li>' +
          '</ul>' +
          '</div>' +
          '</nav>'
    };
});

app.directive（'menu'，function（）{
返回{
限制：'E'，
模板：“”+
“
”+
“
”+
//在此处删除href='#'
'    ' +
//如果不是在其他地方使用的话，在这里删除它可能也不是最糟糕的主意
“
”+
“
”+
“
”+
'' +
''
};
});

只是一个猜测，但我怀疑引导js只在加载时应用一次，指令只在加载后附加。如果您将引导与angular混合使用，我建议您使用ui引导：引导3还没有准备好，但在大多数情况下，您都很好，如果您调整了它提供的模板。Dropdown.prototype.toggle会在两次单击链接时运行-因此事件被正确附加。您可以提供小提琴或弹琴吗？这里是：谢谢！事实上，我一直在追查这个问题，如果元素包含

#

，那么下拉事件处理程序将应用于分离的HTML片段（因此parent（）…parent（）在div上结束，而不是在HTML上结束）

app.directive('menu', function () {
    return {
        restrict : 'E',
        template : '<nav class="navbar navbar-default" role="navigation">' +
          '<ul class="nav navbar-nav">' +
          '  <li class="dropdown">' +

          // remove href = '#' here
          '    <a href class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>' +

          // probably not the worst idea to remove it here either, if not used otherwise
          '    <ul class="dropdown-menu"><li><a href="#">Action</a></li></ul>' +
          '  </li>' +
          '</ul>' +
          '</div>' +
          '</nav>'
    };
});