Как перейти на домашнюю страницу с событием нажатия в angularjs?

Question

Как перейти на домашнюю страницу с событием нажатия в angularjs?

0

У меня есть 3 вкладки, которые создаются с помощью li... когда я нажимаю "Отменить" на вкладке "Добавить", я должен перенаправить на домашнюю страницу. Но вкладка "Добавить форму" подсвечивается, даже если она перенаправляется на главную страницу. Я хочу перенаправить на домашнюю страницу и домой вкладка должна быть перенаправлена. Я не могу это сделать при событии click. Мой код указан ниже:

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

Может ли кто-нибудь решить эту проблему. Когда я перенаправляюсь на домашнюю страницу, мне нужно, чтобы на домашней странице вышла подсветка вместо формы добавления.

Vindya Veer 04 нояб. 2015, в 05:39

Источник

0

Используете ли вы маршрутизацию в вашем приложении
Jayant Patil 04 нояб. 2015, в 04:37
0

Вы можете установить активный класс
Jayant Patil 04 нояб. 2015, в 04:40
0

Я не понимаю тебя ...
Vindya Veer 04 нояб. 2015, в 04:41
0

при событии щелчка вы можете установить активный класс или, если вы используете угловую маршрутизацию, тогда есть свойство resolv для установки начальных значений, где вы устанавливаете, что значение класса активно, чтобы вы могли этого достичь.
Jayant Patil 04 нояб. 2015, в 04:42
0

Я не знаю, как это сделать. Так что только я разместил вопрос ... но я видел это утверждение по клику $ ('. Nav-tabs> .active'). Next ('li'). Find ('a') .trigger ( 'щелчок'); но не знаю, как использовать и активировать класс
Vindya Veer 04 нояб. 2015, в 04:48

Показать ещё 3 комментария

Теги:

angularjs

css

2 ответа

Ещё вопросы

Используете ли вы маршрутизацию в вашем приложении
Вы можете установить активный класс
при событии щелчка вы можете установить активный класс или, если вы используете угловую маршрутизацию, тогда есть свойство resolv для установки начальных значений, где вы устанавливаете, что значение класса активно, чтобы вы могли этого достичь.
Я не знаю, как это сделать. Так что только я разместил вопрос ... но я видел это утверждение по клику $ ('. Nav-tabs> .active'). Next ('li'). Find ('a') .trigger ( 'щелчок'); но не знаю, как использовать и активировать класс

Vindya Veer · Answer 1 · 2015-11-04T05-06-00.000Z

У меня есть ответ. Просто перейдите на главную страницу, когда click eventi только что использовал приведенный ниже код.

$scope.cancelbtn=function(){
        $('#home').trigger('click');
        ngDialog.closeAll();
            };

Используя вышеприведенный код, я решил его. Я отправляю свой ответ, потому что он может помочь другим. Спасибо.

Andrei · Answer 2 · 2015-11-04T01-56-00.000Z

ссылка: Как установить загрузочный активный класс navbar с помощью 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>

если я не упущу понимания вашего вопроса, надеюсь, что это поможет.

если вам просто нужно изменить местоположение (после того, как я перечитал ваш вопрос), все, что вам нужно сделать, это правильно ввести $ location и указать путь, используя $ location.path ('/ home'); метод.
Но в основном контроллере у меня есть конфиг routeprovider
app.config (function ($ routeProvider) {$ routeProvider.when ("/ Home", {templateUrl: "Htmlfiles / Home.html"}) .when ("/ Add", {templateUrl: "Htmlfiles / AddForm.html" , контроллер: "addform"}) .when ("/ View", {templateUrl: "Htmlfiles / ViewForm.html", контроллер: "viewcontroller"}); $ routeProvider.otherwise ({templateUrl: "Htmlfiles / Home.html" });});
возможно, я что-то упускаю, не проблема ли иметь элемент li с активным классом? или вы не можете перенаправить в / home местоположение. Или что-то еще?
Я имею в виду, когда я использую $ window.location.href = "# home", я перенаправляю на домашнюю страницу со страницы добавления формы, когда кнопка отмены нажимается во всплывающем окне. Но добавление из активно. Мне нужен дом, чтобы быть активным .. поэтому я дал вам код CSS в вопросе.