Question

我对角度和MVC编程都很新，所以我不确定我是否正确地执行此操作。

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

我在某处读过你应该使用$ 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");
});

我的一个朋友建议我应该使用命名空间并解除我所有的事件，但这不是我想的有棱角的方式吗？

Answer 1

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

这是一个类似的演示：

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中的事件解除绑定

1 个答案: