AngularJS：コントローラの指示要素を使用する

Question

私は、同じウィンドウ内のトラフページを切り替えることができるページ付けアプリケーションを作っています（ページはお互いの下に表示されます）。誰かがページを変更するたびに、私はこれは私のpageディレクティブでウィンドウが右のページをスクロールする

をしたい：

.directive('page', function() { 
    return { 
     restrict: "E", 
     transclude: true, 
     template: '<div ng-transclude></div>', 
     link: function(scope, element, attrs) { 
      /* 
      * Better in controller, now the function has to be evaluated for every directive. 
      * */ 
      scope.$on('pageChanged', function(event, page) { 
       if (parseInt(attrs.number) === page) { 
        if (page === 1) { 
         window.scrollTo(100, element[0].offsetTop - 110); 
        } 
        else { 
         window.scrollTo(0, element[0].offsetTop - 60); 
        } 
       } 
      }); 
     } 
    } 

これは動作しますが、今、すべてのディレクティブはpageChangedイベントをリッスンし、それに応じて動作します。私はコントローラでリッスンし、コントローラがウィンドウを正しいページにスクロールさせることを好みます。 （このようにして、1つの関数のみを評価する必要があります）。

$scope.$on('pageChanged', function (event, pageNr) { 
      $scope.currentPage = pageNr; 
      /* 
      * Scroll to the right page directive here 
      **/ 
     }); 

これを行うには、コントローラのページ要素にアクセスする必要があります。これを行う方法はありますか？

また、ユーザーがウィンドウをスクロールしたときに、現在のページを正しいページに変更できるメソッドも探していました。

Answer 1

私はイベントに頼るべきではないが、controllerプロパティをディレクティブオブジェクトに追加し、そのディレクティブのコントローラをそこに宣言するべきだと思います。これに似た何か（がそれをテストしていない）：

.directive('page', function() { 
    return { 
     restrict: "E", 
     transclude: true, 
     template: '<div ng-transclude></div>', 
     controller: function ($scope, $element, $attrs, $transclude, otherInjectables) { 
      // Add ng-click="goToPage(n)" directives on your HTML. Those should be inside of the <page> element for this to work. 
      $scope.goToPage = function (page) { 
       if (page === 1) { 
        window.scrollTo(100, $element[0].offsetTop - 110); 
       } 
       else { 
        window.scrollTo(0, $element[0].offsetTop - 60); 
       } 
     }, 
    } 
}); 

詳細については、AngularJS documentation on directivesを参照してください。