angularjs – 绑定类切换到窗口滚动事件

我到目前为止工作正常：

http://jsfiddle.net/eTTZj/29/

<div ng-app="myApp" scroll id="page">

    <header></header>
    <section></section>

</div>

app = angular.module('myApp',[]);
app.directive("scroll",function ($window) {
    return function(scope,element,attrs) {
        angular.element($window).bind("scroll",function() {
             if (this.pageYOffset >= 100) {
                 element.addClass('min');
                 console.log('Scrolled below header.');
             } else {
                 element.removeClass('min');
                 console.log('Header is in view.');
             }
        });
    };
});

(当他们滚动窗口下面的标题，100px，类是切换)

虽然，纠正我，如果我错了，我觉得这不是正确的方法，这样做与Angular。

相反，我推测，最好的方法是使用ng-class并在范围内存储一个布尔值。这样的东西：

<div ng-app="myApp" scroll id="page" ng-class="{min: boolChangeClass}">

    <header></header>
    <section></section>

</div>

app = angular.module('myApp',function() {
             if (this.pageYOffset >= 100) {
                 scope.boolChangeClass = true;
                 console.log('Scrolled below header.');
             } else {
                 scope.boolChangeClass = false;
                 console.log('Header is in view.');
             }
        });
    };
});

虽然这不是动态的，如果我在scroll回调中更改scope.boolChangeClass的值，那么ng-class不会更新。

所以我的问题是：当用户滚动到某个点以下时，如何最好切换#page的类，使用AngularJS？