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

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>

在视图中未定义滚动。 如果在控制器中定义它，则可以看到它，但是指令不能更改其值。 基本上，我希望在视图中根据指令更改值的“ scrolled”变量。

我想念什么？

Answer 1

因为您正在更改Angular所不知道的地方的范围中的某物（例如，自定义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');
     }
});

请参见本示例 ，并在$scope $apply和$watch上进行$scope出色的问答 。 或直接进入relevenat文档 （该文档是干燥的/技术性的，但也说明了其背后的原因）。

Answer 2

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

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