gpt4 book ai didi

twitter-bootstrap - angularjs中Twitter Bootstrap导航栏中的动态链接

转载 作者:行者123 更新时间:2023-12-04 07:45:31 25 4
gpt4 key购买 nike

我创建了一个使用 Twitter Bootstrap 的 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)。

最佳答案

一旦你开始使用路由,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 有自己的 Controller :
<div id="nav-bars-container" ng-controller="NavCtrl">
<a href="#/{{course.id}}">Foo</a>
</div>

&因此有自己的范围。其他可以注入(inject):
function NavCtrl($scope, $route, $routeParams) {
console.log($routeParams);
$scope.course.id = $routeParams.id;
}

关于twitter-bootstrap - angularjs中Twitter Bootstrap导航栏中的动态链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16325557/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com