title: AngularJS: Use directive elements in Controller
body: <p>I'm making a pagination app where the user can switch trough pages in the same window (pages get displayed beneath each other). Whenever someone changes the page, I want the window to scroll the right page</p>
  
  <p>This is my page directive:</p>
  
  <pre><code>.directive('page', function () {
      return {
          restrict: "E",
          transclude: true,
          template: '&lt;div ng-transclude&gt;&lt;/div&gt;',
          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);
                      }
                  }
              });
          }
      }
  </code></pre>
  
  <p>This works but now every directive listens to the pageChanged event and acts accordingly. I would prefer to only listen in the controller and let the controller scroll the window to the right page. (this way only one function has to be evaluated).</p>
  
  <pre><code>$scope.$on('pageChanged', function (event, pageNr) {
              $scope.currentPage = pageNr;
              /*
              * Scroll to the right page directive here
              **/
          });
  </code></pre>
  
  <p>To do this however I need to have access to the pages elements in the controller, is there a way to do this?</p>
  
  <p>I was also looking for a method that could change the currentPage to the right page when the user scrolls the window.</p>