Question

我使用指令检查用户滚动窗口的程度，但我无法将范围与控制器绑定。

这里是指令和控制器代码：

'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>

在视图中滚动未定义。如果我在控制器中定义它，我可以看到它，但指令不能改变它的值。基本上我想在视图中变量＆＃34;滚动＆＃34;这是根据指令改变价值。

我错过了什么？

Answer 1

因为你在一个地方改变某个地方的东西，而Angular并不知道＆＃34;关于（例如自定义DOM事件处理程序），您需要明确告诉它应用该更改：

angular.element($window).bind("scroll", function(){
    if (this.pageYOffset >= 150) {
         $scope.$apply(function() { $scope.scrolled = true; });
         console.log($scope.scrolled + ' Scrolled 100px');
     } else {
         $scope.$apply(function() { $scope.scrolled = false; });
         console.log($scope.scrolled + ' Not scrolled enough');
     }
});

请参阅this example，并查看this excellent Q&A on $scope $apply and $watch。或者直接进入the relevenat documentation（这是干/技术，但也解释了它背后的推理）。

Answer 2

在指令中，您正在更改范围值尝试将更改应用于范围。

$scope.scrolled = true;     
$scope.$apply();

绑定指令范围与AngularJS中的控制器

2 个答案: