Question

希望有人可以帮助一个AngularJS菜鸟！

我已经设置了一个基本网站，其路由更改页面。所有这些页面都有一个持久性菜单，可以与DOM交互以打开/关闭类。我遇到的问题是，在初始页面加载时，点击功能在“主页”页面上工作，但当我导航到“博客”时，该功能停止工作：

app.config(['$routeProvider', function ($routeProvider) {
  $routeProvider
    .when("/", {templateUrl: "partials/home.html", controller: "PageCtrl"})
    .when("/blog", {templateUrl: "partials/blog.html", controller: "PageCtrl"})
}]);

app.controller('PageCtrl', function (/* $scope, $location, $http */) {
  $('#works-navigation .navigation-label').click(function () {
    $('body').toggleClass('show-works-navigation');
  });
});

有什么想法吗？！

Answer 1

该jQuery侦听器附加到单个元素，当Angular导航时，该元素会消失或刷新。使用适用于动态添加元素的.on()侦听器，或者只是删除jQuery并以Angular方式执行。

使用委托处理程序的jQuery方式：

$("#works-navigation ").on("click", ".navigation-label", function() {
    $('body').toggleClass('show-works-navigation');
});

更加集中的方式

使用$ rootScope变量（示例中为sWN）可以轻松完成此操作来控制body类。因此，首先，将ng-class添加到正文中：

<body ng-class="{'show-works-navigation': sWN}">

然后在.navigation-label元素上添加ng-click：

<div class="navigation-label" ng-click="$root.sWN = !$root.sWN"></div>

这将翻转我们用于触发body类的rootScope变量sWN的值。

您也可以在没有rootScope的情况下执行此操作，但由于您在body元素上触发了一个类，我认为这是最安全的方法。

AngularJS控制器问题 - 单击功能停止处理页面更改

1 个答案:

更加集中的方式