我通过使用 angularjs 指令创建了一个导航栏，现在我想单击导航栏中的一个项目以在 ng-view 标签中显示模板 html 文件，但它不起作用。我应该怎么做？将不胜感激任何帮助。
提前致谢
索引.html
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>Title</title> <linkrel="stylesheet"href="bower_components/bootstrap/dist/css/bootstrap.css"> <linkhref="https://cdn.bootcss.com/fontawesome/4.7.0/css/fontawesome.css"rel="stylesheet">
</head>
<body>
<na></na>
<div ng-view></div>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular/angular-route.js"></script>
<script src="bower_components/angular/angular-animate.js"></script>
<script src="bower_components/angular/angular-sanitize.js"></script>
<script src="app.js"></script>
</body>
</html>
应用程序.js
var app=angular.module("app",['ngRoute']);
app.directive('na',function () {
return {
restrict: "EA",
replace: true,
transclude: true,
scope:{
items:'@items',
},
templateUrl:'./tpl/index/tmpl/tplindex.html',
// template: '<ul ng-repeat="item in items" class="nav navbar navbar-default"> <li><i class="{{item.icon}}" aria-hidden="true"></i>{{item.name}}</li> </ul>',
link:function($scope, element, attrs){
$scope.items=[{name:'system',icon:'fa fa-windows fa-2x',id:'system'},
{name:'recognition',icon:'fa fa-indent fa-2x',id:'recognition'},
{name:'route',icon:'fa fa-indent fa-2x',id:'route'},
{name:'auth',icon:'fa fa-user-circle-o fa-2x',id:'auth'},
{name:'strategy',icon:'fa fa-windows fa-2x',id:'strategy'},
{name:'strategy',icon:'fa fa-windows fa-2x',id:'static'}
];
}
}
}).config(['$routeProvider', '$controllerProvider',
function($routeProvider, $controllerProvider) {
$routeProvider.
when('/recongition', {
template:'this is test info'
}).
when('/system', {
templateUrl: './tpl/system/system.html'
}).
when('/route', {
templateUrl: 'tpl/route/route.html'
//controller: 'routeController',
//directive:'routeDrective'
}).
when('/auth', {
templateUrl: 'tpl/auth/auth.html'
}).
when('/strategy', {
templateUrl: 'tpl/strategy/strategy.html'
}).
when('/static', {
templateUrl: './tpl/static/static.html'
}).
otherwise({
redirectTo: '/static' //angular就喜欢斜杠开头
});
}]);
tplindex.html
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header" style="margin-left: 20px">
<a class="navbar-brand" href="#" style="font-size: xx-large"> Panabit</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav" ng-repeat="item in items">
<li><a href="#/{{item.id}}" ><i class="{{item.icon}}"></i> {{item.name}}</a></li>
</ul>
</div><!--/.nav-collapse -->
</nav>
您需要使用ng-href指令而不是href为了{{item.id}}在您的网址中使用角度插值。所以你的链接应该是这样的：
<li><a ng-href="#/{{item.id}}" ><i class="{{item.icon}}"></i> {{item.name}}</a></li>
如果这不起作用，它可能会尝试使用 html5mode 路由，因此您可以尝试通过添加来禁用它
$locationProvider.html5Mode(true);
在其中添加路由配置。
如果您在代码中添加了一个 Plunker（或类似的）会很有帮助，所以我们可以自己玩弄它。
items-scope 变量，因此您可以删除它并简单地使用scope: true本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句