angularjsdirectivengrouteng-view

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

I create a navbar by using directive of angularjs,now I want click a item in navbar to display a template html file in the ng-view tag,but it does not work. How should I do? would appreciate any help.

Thanks in advance

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>
Solution

  • You need to use the ng-href directive instead of href in order for you to use angular interpolation {{item.id}} in your urls. So your link should look like this instead:

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

    If that doesn't work, it might try to use html5mode routes, so you could try disabling it, by adding

    $locationProvider.html5Mode(true);

    where you add your route configuration.

    It would be helpful if you added a Plunker (or similar) with your code, so we can play around with it ourselves.

    Other notes