AngularJS UIRouter - Удалить стиль тела на спине мыши

Вопрос фона:AngularJS UIRouter - Удалить стиль тела на спине мыши

У меня есть Угловое приложение, которое имеет 2 представления, используя UIRouter я поменяться с точки зрения, что URL перенаправляется слишком

В моей просмотров Я использую Jasny Bootstrap для создания меню от меню холста «толчок», как показано на рисунке:

https://codepen.io/rugor/pen/eiyzh

этого добавить в стиль к тегу тела, когда меню раскрывается, как показано ниже:

<body translate="no" class="canvas-slid" style="position: relative; left: 300px; overflow: hidden; right: -300px;"> 
    // Other HTML 
</body>

выпуска:

У меня есть следующий index.html View, который используется в качестве основного интерфейса вида контейнера для каждого из моих приложений страниц, который будет введен, чтобы:

<body ng-app="app"> 
    <div ui-view> 
     //Views injected here when routed. 
    </div> 
</body

Если я просматриваю к моему домашней странице, т.е. Home.cshtml, я встретился со следующей страницей:

тело стиль для главной страницы:

<body ng-app="app" class="ng-scope"> 
    //Homepage Html

тогда я просматриваю к странице Update.html и открыть меню Jansy Off Canvas:

Обратите внимание, что тег body страницы Index.cshtml добавил следующий стиль для раскрытия меню холста:

<body ng-app="app" class="ng-scope canvas-slid" style="position: relative; left: 300px; overflow: hidden; padding-right: 17px; right: -300px;"> 
</body>

Здесь начинается проблема.

Если я теперь нажать на кнопку назад в браузере с помощью меню холста Jansy от показал то тип тела не удалены из тела тега, как показано на рисунке:

стиль тело все еще применяется:

<body ng-app="app" class="ng-scope canvas-slid" style="position: relative; left: 300px; overflow: hidden; padding-right: 17px; right: -300px;"> 
</body>

Как я должен преодолеть эту проблему? Могу ли я удалить любой стиль тега body в ui-view Index.html, когда пользователь использует кнопку «Назад» в своем браузере? Если да, то как?

Я понимаю, почему это происходит, и если пользователь должен закрыть меню холста и щелкнуть, проблема не возникнет.

Поскольку тело разделяется между представлениями, мне нужен способ очистки стиля на обратном щелчке, чтобы эффективно сбросить его до нуля.

источник

2016-06-24 user1352057

Это может быть полезно, пока у найти лучший способ делать вещи: http://stackoverflow.com/questions/20899274/how-to -refresh-page-on-back-button-click – tam5

@ user1352057: Проверьте мой ответ, если вы сочтете это полезным! –

Вы можете добавить слушателя в $ rootScope для locationchangestart или locationchangesucess event (https://docs.angularjs.org/api/ng/service/ $ location) или statechangestart/statechangesuccess https://github.com/angular-ui/ui-router/wiki) и удалить класс из тела.

Чтобы быть больше фантазии вы можете реализовать его в качестве директивы на тело элемента:

<body mydirective> 

    app.directive(mydirective, 
... 
    link : function(scope, element, attrs) { 
     scope.$on('$stateChangeStart', function() { 
      element.removeClass("canvas-slid"); 
     } 
    }

источник

2016-06-25 00:19:37

На самом деле, это небольшая проблема с Jasny-самозагрузки плагин и здесь я даю временное решение, чтобы удалить стиль ,

var _enableScrolling = $.fn.offcanvas.Constructor.prototype.enableScrolling; 
$.fn.offcanvas.Constructor.prototype.enableScrolling = function() { 
_enableScrolling.apply(this, arguments); 
$('body').css({ 
     'overflow': '', 
     'padding-right': '' 
    }); 
}

Но вы можете проверить его с главной ветвью Jasny-загрузчике для фактического исправления

jasny-bootstrap ui stlye remove

источник

2016-06-25 05:52:32 Anand

Спасибо за ваш ответ. Я добавил ваш код выше в теге скрипта моей страницы Index.html, но проблема все еще присутствует. – user1352057

Вы можете попробовать удалить, что встроенный CSS с помощью JQuery при нажатии на кнопку возврата. Так что в принципе, какой бы контроллер ни загружал, когда вы нажимаете кнопку «Назад», попробуйте добавить к нему этот код.

$('body').removeAttr("style")

Это позволит удалить встроенный стиль применяется к тегу тела

источник

2016-07-02 20:21:05

@ user1352057: Пожалуйста, проверьте это. –

AngularJS UIRouter - Удалить стиль тела на спине мыши

ответ

Смежные вопросы