AngularJS 后的事件解绑

Question

我对 angular 和 MVC 编程都很陌生，所以我不确定我是否正确地执行了此操作。

我有一个 jquery 片段我想使用我的部分部分，但不是全部。但是由于事件侦听器永远不会因页面永远不会重新加载而过期，我想知道我将如何注册我的事件、监听它们并以 angular 的方式销毁它们。

我在某处读到您应该使用 $scope.on 但我不太明白它是如何工作的。

示例

app.controller('PageCtrl', function ($scope, $location, $http) {

  // jQuery to collapse the navbar on scroll
  $(window).on( "scroll", function() {
  if ($(".navbar").offset().top > 50) {
      $(".navbar-fixed-top").addClass("top-nav-collapse");
      $(".logotype-white").addClass("logotype-hide");
      $(".logotype-grey").removeClass("logotype-hide");
  } else {
      $(".navbar-fixed-top").removeClass("top-nav-collapse");
      $(".logotype-white").removeClass("logotype-hide");
      $(".logotype-grey").addClass("logotype-hide");
  }
});

app.controller('OtherCtrl', function (/* $scope, $location, $http */) {
$(function() {
      $(".navbar-fixed-top").addClass("top-nav-collapse");
      $(".logotype-white").addClass("logotype-hide");
      $(".logotype-grey").removeClass("logotype-hide");
});

我的一个朋友建议我应该使用名称空间并取消绑定我的所有事件，但我猜这不是 angular 的方式？

Answer 1

为了在 angularjs 中实现这一点，您需要使用 ng-class 指令来切换 class，并监听您的 window 滚动事件控制器。

这是一个类似的演示：

angular.module('myApp', [])
  .controller('MyCtrl', function($scope, $window) {

    $scope.currWindowScroll = 0;

    angular.element($window).bind('scroll', function() {
      $scope.currWindowScroll = $window.scrollY;
      $scope.$apply();
    });

  });

.fixed {
  position: fixed;
  padding: 30px 10px;
}
.fixed div {
  padding: 10px;
  width: 300px;
  margin: 10px auto;
  background-color: yellow;
}
.red {
  background-color: red !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" style="height: 1500px">
  <div ng-controller="MyCtrl">
    <div class="fixed">
      <div ng-class="{ 'red' : currWindowScroll > 500 }">
        This has red background if scroll > 500</div>
    </div>
  </div>
</div>

AngularJS 后的事件解绑

Event unbinding in AngularJS

javascript

jquery

events

angularjs