我正在使用指令来检查用户滚动窗口的数量,但我无法设法将范围与控制器绑定。在AngularJS中绑定指令范围与控制器
这里的指令和控制器代码:
'use strict';
angular.module('myApp.landing', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
}])
.controller('landingCtrl', ["$scope", function($scope) {
$scope.scrolled = false;
$scope.$on('$routeChangeSuccess', function() {
});
}]).
directive("scroll", ["$window", function($window){
return {
scope: false,
link: function($scope, element, attrs){
angular.element($window).bind("scroll", function(){
if (this.pageYOffset >= 150) {
$scope.scrolled = true;
console.log($scope.scrolled + 'Scrolled 100px');
} else {
$scope.scrolled = false;
console.log($scope.scrolled + 'Not scrolled enough');
}
});
}
};
}]);
这是视图代码:
<div ng-controller="landingCtrl" scroll>
<div class="row">
<div class="col-sm-12 col-md-9 landing-square">{{ scrolled }}</div>
<div class="col-sm-12 col-md-3 landing-square"></div>
....
</div>
在滚动没有定义视图。如果我在控制器中定义它,我可以看到它,但该指令无法更改其值。基本上我想在视图中根据指令改变值的变量“滚动”。
我错过了什么?
尝试添加'$ scope。$ apply()'作为滚动事件处理程序的最后一条语句,以便Angular获知有关更改的信息。 (更好的是,将整个处理程序的内容包装在'$ apply()'中。) –
...所有这些都假定console.logs是打印的,即事件处理程序实际上正在运行 –