6

我创建了一个使用 Twitter 引导程序的 Angular 应用程序。

我想要导航栏中的动态链接（比如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>

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

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

4

1 回答 1

6

一旦你开始使用路由，Angular 只会在 ng-view 中工作。

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

// links to cdn, js, css
<body>
  <div id="app-container" ng-app="dashboard" ng-view></div>
</body>

所有的部分都显示在 div 中。

所有部分都包括最顶部的导航部分：

<div ng-include src="'html/navigation.html'"></div>

navigation.html 有自己的控制器：

<div id="nav-bars-container" ng-controller="NavCtrl">
  <a href="#/{{course.id}}">Foo</a>
</div>

&因此有自己的范围。其他可以注入：

function NavCtrl($scope, $route, $routeParams) {
  console.log($routeParams);
  $scope.course.id = $routeParams.id;
}
于 2013-05-01T20:43:53.967 回答