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


<html lang="en" ng-app="app">
    <meta charset="UTF-8">
    <title>Title</title>  <linkrel="stylesheet"href="bower_components/bootstrap/dist/css/bootstrap.css"> <linkhref=""rel="stylesheet">

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


  var app=angular.module("app",['ngRoute']);

    app.directive('na',function () {
        return {
            restrict: "EA",
            replace: true,
            transclude: true,
           // template: '<ul ng-repeat="item in items" class="nav navbar navbar-default"> <li><i class="{{item.icon}}"  aria-hidden="true"></i>{{}}</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) {
            when('/recongition', {
                template:'this is test info'

            when('/system', {
                templateUrl: './tpl/system/system.html'

            when('/route', {
                templateUrl: 'tpl/route/route.html'
                //controller: 'routeController',
            when('/auth', {
                templateUrl: 'tpl/auth/auth.html'

            when('/strategy', {
                templateUrl: 'tpl/strategy/strategy.html'

            when('/static', {
                templateUrl: './tpl/static/static.html'

                redirectTo: '/static'      //angular就喜欢斜杠开头



<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 id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav" ng-repeat="item in items">
                <li><a  href="#/{{}}" ><i class="{{item.icon}}"></i>&nbsp;&nbsp;{{}}</a></li>
        </div><!--/.nav-collapse -->


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

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

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


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

  • You don’t need your directive to be transclusive
  • You don’t seem to pass anything to the items-scope variable, so you can remove that and simply use scope: true
  • You should perhaps use the angular 1.5 components instead (assuming you’re using angular 1.5 or above)

Answered By – Nikolaj Dam Larsen

Answer Checked By – Mary Flores (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.