AngularJS UIRouter - 删除后退时的主体样式

Question

问题背景：

我有一个有 2 个视图的 Angular 应用程序，使用 UIRouter 我交换了 URL 也被路由的视图

在我看来，我正在使用 Jasny Bootstrap 制作一个关闭 canvas 菜单 'push' 菜单，如图所示：

如图所示，当菜单显示时，将样式添加到 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 标签添加了以下样式以显示关闭 canvas 菜单：

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

问题由此开始。

如果我现在在关闭 Jansy canvas 菜单的情况下单击浏览器上的 后退按钮 revealed那么body style是not去掉body标签，如图:

仍然应用正文样式：

<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 标签上的任何样式吗？如果有怎么办？

我明白为什么会这样，如果用户关闭 canvas 菜单并点击返回，问题就不会发生。

由于 body 在视图之间共享，我需要一种方法来清除单击后退时的样式，以有效地将其重置为空。

Answer 1

您可以为 locationchangestart 或 locationchangesucess 事件（https://docs.angularjs.org/api/ng/service/$location) or statechangestart/statechangesuccess https://github.com/angular-ui/ui-router/wiki）向 $rootScope 添加侦听器，并从正文中删除 class。

为了更花哨，您可以将其实现为 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 的主分支检查它以进行实际修复

jasny-bootstrap ui stlye remove

Answer 3

您可以尝试在按下后退按钮时使用 jquery 删除内联 CSS。所以基本上当你按下后退按钮时无论控制器加载什么，都尝试将这段代码添加到它。

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

它将删除应用于 body 标签的任何内联样式

AngularJS UIRouter - 删除后退时的主体样式

AngularJS UIRouter - Remove body style on back click

angularjs

jasny-bootstrap