2

问题背景：

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

在我的观点中，我正在使用 Jasny Bootstrap 生成一个画布外菜单“推送”菜单，如图所示：

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

当菜单显示时，这将添加到 body 标签的样式，如下所示：

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

问题：

我有以下 Index.html 视图，它用作要注入的每个应用程序页面的主要 ui-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 菜单：

在此处输入图像描述

请注意，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 标记中删除 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 标记上的任何样式吗？如果有怎么办？

我理解为什么会发生这种情况，如果用户关闭画布菜单并单击返回，则不会发生此问题。

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

4

3 回答 3

4

您可以将侦听器添加到 $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");
        }
    }
于 2016-06-25T00:19:37.757 回答
1

当您按下后退按钮时，您可以尝试使用 jquery 删除该内联 CSS。因此，基本上当您按下后退按钮时加载任何控制器，请尝试将此代码添加到其中。

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

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

于 2016-07-02T20:21:05.117 回答
1

实际上，这是 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 删除

于 2016-06-25T05:52:32.997 回答