javascript - AngularJS のコントローラーと対話する ScrollSpy ディレクティブ

Question

私はAngularJSを初めて使用し、すでに絶望の瀬戸際にいます:)私のアプリは次のようになります( Plnkrの動作しない例):

HTML

<div ng-app="myApp" ng-controller='controllers.content' >
  <h2 id="fixed">{{ header }}</h2>
  <ul>
    <li ng-repeat="item in db" scroll-stop="item">{{ item.name }}</li>
  </ul>
</div>

JS

angular.module('myApp.controllers',[]);
var app = angular.module('myApp', [
    'myApp.controllers'
]);

var app = angular.module('myApp.controllers').controller('controllers.content', ['$scope', function($scope){
    $scope.db = [
      { name: "20 February 2014", header: "Today" },
      // ...
    ];
    $scope.header = "Today";
}]);

基本的に、アイテムが現在ビューポートの上部にあるときはいつでも、アイテムの内容をアイテムのプロパティに変更するスクロールスパイが必要ですh2(上部に固定されていると仮定します):headerdb

app.directive('scrollStop', function() {
   return {
        restrict: 'A',
        scope: {
          scrollStop:'='
        },
        link: function (scope, element, attrs) {

            var $page = angular.element(window)
            var $el   = element[0]
            var last_top = $el.getBoundingClientRect().top - 60;
            $page.bind('scroll', function () {
                var current_top = $el.getBoundingClientRect().top - 60;
                if (last_top >= 0 && current_top < 0) {
                    // HERE!
                    console.log(scope.scrollStop.header);
                    scope.header = scope.scrollStop.header;
                }
                last_top = current_top;
            })

        }
    }
});

ただし、ディレクティブ内から編集するcontentためにディレクティブ内からコントローラーと通信する方法がわかりません。がコントローラーの とは違うことは理解しており、どこかで使用する必要があるという漠然とした感覚がありますが、それを正しくする方法がわかりません。部分的には、AngularJS で何かを行うための 5 つの異なる略記があり、それらが常にうまくいくとは限らないためです。文体のガイダンスを含め、どんな助けも感謝します。 $scope.headerscope$scoperequire