css - 我如何使用angularjs中的点击事件进入主页？

Question

我有 3 个使用 li 创建的选项卡...当我在添加表单选项卡中单击取消时，我必须重定向到主页..但是添加表单选项卡突出显示，即使它被重定向到主页。我想重定向到主页必须重定向页面和主页选项卡。我无法在单击事件时执行此操作。我的代码如下:

//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");
              });
            });

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

Answer 1

引用: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 类

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

除非我没有理解您的问题，否则希望对您有所帮助。