Twitter中的动态链接在angularjs中的Bootstrap导航栏

BBa*_*ker 6 twitter-bootstrap angularjs

我创建了一个使用Twitter引导程序的角度应用程序.

我想要导航栏中的动态链接(比如 ng-href="#/{{course.id}}"

他们永远不会渲染 - 他们最终会像 href="#/"

如果我把导航栏放在<div ng-view>他们确实渲染的页面部分内,虽然我不想把它放在那里,因为我不想在每个部分上复制它.

基本页面的布局如下:

<html ng-app="studentApp">
  <head> links to cdns here</head>
  <body>
    <div class="container-fluid">
      <div class="navbar navbar-inverse navbar-fixed-top">Dynamic bar here</div>
      <div ng-view>Partials in here</div>
    </div>
  </body>
</html>
Run Code Online (Sandbox Code Playgroud)

对于在ng-view部分中加载的所有部分,插值按预期发生,但不在导航栏中.

我创建了一个Plunker,而不是试图在这里包含所有内容.(http://plnkr.co/MK8QEDQUVawkOi92xJXk).

Foo*_*o L 6

一旦开始使用路由,Angular将仅在ng-view内部工作.

我在包含页面中只有这个:

// links to cdn, js, css
<body>
  <div id="app-container" ng-app="dashboard" ng-view></div>
</body>
Run Code Online (Sandbox Code Playgroud)

所有部分都显示在div内.

所有部分包括最顶部的导航部分:

<div ng-include src="'html/navigation.html'"></div>
Run Code Online (Sandbox Code Playgroud)

navigation.html有自己的控制器:

<div id="nav-bars-container" ng-controller="NavCtrl">
  <a href="#/{{course.id}}">Foo</a>
</div>
Run Code Online (Sandbox Code Playgroud)

因此有自己的范围.其他人可以注入:

function NavCtrl($scope, $route, $routeParams) {
  console.log($routeParams);
  $scope.course.id = $routeParams.id;
}
Run Code Online (Sandbox Code Playgroud)