AngularJS: Użyj elementów dyrektywy w kontrolerze

Question

Robię aplikację do stronicowania, w której użytkownik może przełączać strony korytowe w tym samym oknie (strony wyświetlają się pod sobą). Gdy ktoś zmienia stronę, chcę okno przewijać odpowiednią stronę

To moja dyrektywa strony:

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

To działa, ale teraz każdy dyrektywa słucha przypadku pageChanged i działa odpowiednio. Wolałbym tylko słuchać w kontrolerze i pozwolić kontrolerowi przewinąć okno na właściwą stronę. (w ten sposób należy ocenić tylko jedną funkcję).

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

Aby to zrobić, ale muszę mieć dostęp do stron elementów kontrolera, czy istnieje sposób, aby to zrobić?

Szukałem również metody, która może zmienić aktualną stronę na właściwą stronę, gdy użytkownik przewinie okno.

Answer 1

Myślę, że nie powinieneś polegać na zdarzeniach, ale dodaj właściwość controller do obiektu dyrektywy i zadeklaruj tam kontroler dyrektywy. Coś podobnego do tego (nie testowałem to):

.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); 
       } 
     }, 
    } 
}); 

Aby uzyskać więcej informacji, zapoznaj się z AngularJS documentation on directives.