通过使用指令创建导航栏，单击导航栏中的项目，ng-view 中的模板 html 为空

Question

我使用 angularjs 的指令创建了一个导航栏，现在我想点击导航栏中的一个项目以在 ng-view 标签中显示一个模板 html 文件，但它不起作用。我应该怎么做？将不胜感激。

提前致谢

index.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>

app.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>&nbsp;&nbsp;{{item.name}}</a></li>
            </ul>
        </div><!--/.nav-collapse -->
</nav>

Answer 1

您需要使用 ng-href 指令而不是 href 才能在您的网址中使用 angular 插值 {{item.id}}。所以你的 link 应该看起来像这样：

<li><a ng-href="#/{{item.id}}" ><i class="{{item.icon}}"></i>&nbsp;&nbsp;{{item.name}}</a></li>

如果这不起作用，它可能会尝试使用 html5mode 路由，因此您可以尝试通过添加

来禁用它

$locationProvider.html5Mode(true);

添加路线配置的位置。

如果您在代码中添加了一个 Plunker（或类似的），那将会很有帮助，这样我们就可以自己尝试一下了。

其他说明

你不需要你的指令是透明的
您似乎没有向 items-scope 变量传递任何内容，因此您可以删除它并简单地使用 scope: true
您或许应该改用 angular 1.5 组件（假设您使用的是 angular 1.5 或更高版本）

通过使用指令创建导航栏，单击导航栏中的项目，ng-view 中的模板 html 为空

By using directive to create navbar ,click a item in navbar,the template hetml in ng-view is empity

angularjs

directive

ngroute

ng-view

其他说明