Binding directory scope mit Controller in AngularJS

Question

Ich verwende eine Direktive, um zu überprüfen, wie viel der Benutzer das Fenster scrollt, aber ich kann nicht das Scope mit dem Controller binden.

Hier ist die Richtlinie und Controller-Code:

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

dies ist der Ansicht Code:

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

Nach Ansicht nicht definiert gescrollt wird. Wenn ich es im Controller definiere, kann ich es sehen, aber die Direktive kann ihren Wert nicht ändern. Grundsätzlich möchte ich in der Ansicht die Variable "scrollen", die den Wert gemäß der Richtlinie ändert.

Was fehlt mir?

Answer 1

Weil Sie ändern ein etwas über den Umfang an einem Ort Angular nicht „wissen“ (zB einen benutzerdefinierter DOM Event-Handler), müssen Sie es ausdrücklich sagen, dass die Änderung zu übernehmen:

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

Siehe this example und siehe this excellent Q&A on $scope$apply and $watch. Oder gehen Sie einfach direkt zu the relevenat documentation (was trocken/technisch ist, aber erklärt die Begründung dahinter).

Answer 2

In der Direktive ändern Sie die Bereichswerte.
Versuchen Sie, die Änderungen auf den Bereich anzuwenden.

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