css - 如何在angularjs中单击事件转到首页？

我有3个使用li创建的选项卡...当我单击addform选项卡中的cancel时，我必须重定向到主页。标签必须重定向。点击事件我无法执行。
我的代码如下：

//when cancel button is clicked

$scope.cancelbtn=function(){
        $window.location.href="#Home"
        ngDialog.closeAll();
            };

//html
<div id="header">

                <div id="header_name" style="padding-top:25px"><center><h1 class="hh"><a>Dynamic Creation of  Forms</a></h1></center></div>
                    <div id="nav-masthead" role="navigation">
                        <ul style="padding-top: 38px;padding-left:113px">
                            <li >
                                <a href="#/Home"><span class="glyphicon glyphicon-home">Home</span></a>
                            </li>
                            <li>
                                <a href="#/Add"><span class=" glyphicon glyphicon-plus-sign ">Add Form</span></a>
                            </li>
                            <li>
                                <a href="#/View">View Form</a>
                            </li>
                        </ul>
                    </div>
                </div>
            <div style="color:#0d7dc1;padding: 51px;padding-left: 120px;"><ng-view></ng-view></div>


//css

#header {
                background-image: url(//www.drupal.org/sites/all/themes/bluecheese/images/sprites-horizontal.png);
                background-color: #56b3e6;
                height:141px;
                background-position: 0 -1088px;

            }
            .hh{
                margin-top:0;
            }
            #nav-header {
                overflow:hidden;
                font-size:0.923076em;
                min-height:1.5em;
            }
            #header_name a{
                background-position: 0 -467px;

                 background-repeat: no-repeat;
                 color:white;
                text-decoration:none;
                height: 63px;
                 overflow: hidden;
                 text-indent: -999em;
                 width: 181px;
                }
            #nav-masthead{
                width:100%;
                float:right;
                margin-right: 0;
                display: inline;
                position: relative;
                z-index: 1;
                min-height: 0.69231em;
            }
            ul{
                list-style: none;
                font: inherit;
                font-size: 100%;
            }
            #nav-masthead ul li{
                list-style: none;
                float: left;
                font-size: 0.923076em;
                margin-right: 0.615384em;
            }
            #nav-masthead ul li a {
                background-color: #0d7dc1;
                border-radius: 10px 10px 0 0;
                color: white;
                float: left;
                padding: 0.416666em .75em 0.416666em 0.615384em;
                text-decoration: none;
            }
            #nav-masthead ul li:hover a {
                    background-color: white;
                    color:black;
                    }
            #nav-masthead li a.col {
                 color: black;
                 background-color: white;
                    }

//script

$(document).ready(function() {
              $('#nav-masthead li a').click(function() {

                $('#nav-masthead li a').removeClass("col");
                $(this).addClass("col");
              });
            });

谁能解决这个问题。当我重定向到首页时，我需要突出显示首页，而不是添加表单。

最佳答案

参考：How to set bootstrap navbar active class with Angular JS?

本质上，如果您有一个MainCtrl封装了所有内容，则可以跟踪当前处于活动状态的活动状态。

angular.module('app').controller('MainCtrl', ['$scope', '$location', function($scope, $location) {

  $scope.isActive = function('viewLocation') {    //pass in the current location
       return viewLocation === $location.path();  //class becomes active if the pathing is corret
  }

}]);

然后让您的html包含调用该函数的ng-class

<li ng-class="{ active: isActive('/home')}">
                                <a href="#/Home"><span class="glyphicon glyphicon-home">Home</span></a>
                            </li>
                            <li ng-class="{ active: isActive('/add')}">
                                <a href="#/Add"><span class=" glyphicon glyphicon-plus-sign ">Add Form</span></a>
                            </li>
                            <li ng-class="{ active: isActive('/view')}">
                                <a href="#/View">View Form</a>
                            </li>

除非我想念您的问题，否则希望对您有所帮助。

关于css - 如何在angularjs中单击事件转到首页？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33513772/