用户滚动时的AngularJS切换路径(AngularJS switch path when user scroll)

用户滚动时的AngularJS切换路径(AngularJS switch path when user scroll)

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

我在用户滚动时使用指令进行检测：

.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">

我在Controller 1的视图中获得了boolChangeClass

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

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

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

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

I try to detect when the user scroll the view and then I would like to switch view.

I'm using a directive for detect when the user scroll :

.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(); }); };

The directive is called on the div with the ng-controller

<div scroll ng-controller="MyCtrl1">

I get the boolChangeClass in the view of Controller 1

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

And log the result in my controller

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

How can I detect in my controller that boolChangeClass have changed and then I would like to go to controller2 ?

最满意答案

使用$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 }) }]);

Use $watch to detect any change in the scope variable.

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 }) }]);