AngularJS 用户滚动时切换路径

Question

我尝试检测用户何时滚动视图然后我想切换视图。

我正在使用一个指令来检测用户何时滚动：

.directive("scroll", function ($window) {
return function(scope, element, attrs) {
    angular.element($window).bind("scroll", function() {
        if (this.pageYOffset >= 1) {
            scope.boolChangeClass = true;
            console.log('Scrolled down');
        } else {
            scope.boolChangeClass = false;
            console.log('Scroll up');
        }
        scope.$apply();
    });
};

使用 ng-controller

在 div 上调用该指令

<div scroll ng-controller="MyCtrl1">

我在控制器 1 的视图中得到了 boolChangeClass

   <span>{{boolChangeClass}}</span>

并将结果记录在我的控制器中

myApp.controller('MyCtrl1', ['$scope', '$http', function($scope, http) {
   console.log($scope.boolChangeClass);
}]);

如何在我的控制器中检测到 boolChangeClass 已更改然后我想转到 controller2？

Answer 1

使用$watch检测作用域变量的任何变化。

myApp.controller('MyCtrl1', ['$scope', '$http', function($scope, http) {
   console.log($scope.boolChangeClass);

   $scope.$watch(function(){
       return $scope.boolChangeClass;
   }. function() {
      console.log($scope.boolChangeClass); // will be called when the values gets changed
   })

}]);

Answer 2

这是您应该使用服务在不同控制器之间共享数据的地方..

或者如果你真的想简单地做，只需在上根 div 中定义一个 baseController 并在该 baseController 中定义你的 boolChaneClass 以便它可以从两个子控制器（ctrl1，ctrl2 ...）访问

AngularJS 用户滚动时切换路径

AngularJS switch path when user scroll

javascript

scroll

angularjs

angularjs-directive