个人中心
gpt4 book ai didi

AngularJS UI Router - 删除后退单击时的主体样式

转载 作者：行者123 更新时间：2023-12-02 23:44:21 29 4
gpt4 key购买 nike

问题背景:

我有一个 Angular 应用程序，有 2 个 View ，使用 UIRouter 我在 URL 也被路由的 View 中交换

在我的 View 中，我使用 Jasny Bootstrap 来生成 Canvas 外菜单“推送”菜单，如下所示:

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 View ，用作要注入(inject)的每个应用程序页面的主 ui-view 容器:

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

如果我浏览到我的主页，即 Home.cshtml，我会看到以下页面:

enter image description here

主页的正文样式:

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

然后，我浏览到 Update.html 页面并显示 Jansy Off Canvas 菜单:

enter image description here

请注意，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 外菜单显示，那么body 样式未从 body 标记中删除，如下所示:

enter image description here

仍然应用主体样式:

<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 外菜单并单击返回，则不会出现此问题。

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

最佳答案

您可以将监听器添加到 $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");
        }
    }

关于AngularJS UI Router - 删除后退单击时的主体样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38022666/

29 4 0
文章推荐： windows-7 - 如何在JMeter中动态设置HTTP Referer header？
文章推荐： qooxdoo - 资源解释为 Font，但使用 MIME 类型 application/x-font-woff 进行传输
文章推荐： .htaccess - 使用 htaccess 重定向到照片
文章推荐： backbone.js - backbone.js 中的 delegateEvents
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com