AngularJS UIRouter-刪除單擊后的主體樣式

Question

問題背景：

我有一個具有2個視圖的Angular應用程序，使用UIRouter我也交換了URL也被路由的視圖

在我看來，我正在使用Jasny Bootstrap來生成畫布菜單“推”菜單，如下所示：

顯示菜單時，此樣式為body標簽添加了樣式，如下所示：

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

問題：

我有以下Index.html視圖，用作將我的每個應用程序頁面注入其中的主要ui視圖容器：

<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”菜單：

請注意，Index.cshtml頁面的body標簽已添加以下樣式，以顯示非畫布菜單：

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

我應該如何克服這個問題？ 當使用用戶單擊瀏覽器上的“后退”按鈕時，是否可以在ui-view Index.html的body標簽上刪除任何樣式？ 如果可以，怎么辦？

我了解為什么會這樣，並且如果用戶關閉畫布菜單並單擊返回，則不會發生此問題。

由於主體是在視圖之間共享的，因此我需要一種清除后退點擊樣式的方式，以將其有效地重置為空。

Answer 1

您可以將監聽器添加到$ rootScope中，以獲取locationchangestart或locationchangesucess事件（ https://docs.angularjs.org/api/ng/service/ $ location）或statechangestart / statechangesuccess https://github.com/angular-ui/ui- router / wiki ）並從正文中刪除類。

為了更加精美，您可以將其作為對body元素的指令實現：

<body mydirective>

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

Answer 2

實際上，這是jasny-bootstrap插件的一個小問題，在這里，我提供了一個臨時解決方案來刪除樣式。

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

但是您可以使用jasny-bootstrap的master分支來檢查它的實際修復方法

jasny-bootstrap ui stlye刪除

Answer 3

您可以嘗試在按下返回按鈕時使用jquery刪除該內聯CSS。 因此，基本上，無論您在按下后退按鈕時加載了什么控制器，都請嘗試向其添加代碼。

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

它將刪除應用於body標簽的所有內聯樣式

AngularJS UIRouter-刪除單擊后的主體樣式

問題描述

3 個解決方案

解決方案1
4 已采納 2016-06-25 00:19:37

解決方案2
1 2016-06-25 05:52:32

解決方案3
1 2016-07-02 20:21:05

AngularJS UIRouter-刪除單擊后的主體樣式

問題描述

3 個解決方案

解決方案1 4 已采納 2016-06-25 00:19:37

解決方案2 1 2016-06-25 05:52:32

解決方案3 1 2016-07-02 20:21:05

解決方案1
4 已采納 2016-06-25 00:19:37

解決方案2
1 2016-06-25 05:52:32

解決方案3
1 2016-07-02 20:21:05