AngularJS: Sử dụng các phần tử chỉ thị trong Bộ điều khiển

Question

Tôi đang tạo một ứng dụng phân trang nơi người dùng có thể chuyển đổi các trang máng trong cùng một cửa sổ (các trang được hiển thị bên dưới nhau). Bất cứ khi nào một ai đó thay đổi trang, tôi muốn các cửa sổ để di chuyển trang đúng

Đây là chỉ thị trang web của tôi:

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

này hoạt động nhưng bây giờ mỗi chỉ thị lắng nghe sự kiện pageChanged và hành động cho phù hợp. Tôi thích chỉ nghe trong bộ điều khiển và để cho bộ điều khiển cuộn cửa sổ sang trang bên phải. (theo cách này chỉ có một hàm được đánh giá).

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

Để làm điều này tuy nhiên tôi cần có quyền truy cập vào các yếu tố trang trong bộ điều khiển, có cách nào để thực hiện việc này không?

Tôi cũng đang tìm một phương pháp có thể thay đổi currentPage sang đúng trang khi người dùng cuộn cửa sổ.

Answer 1

Tôi nghĩ bạn không nên dựa vào sự kiện, nhưng thêm thuộc tính controller vào đối tượng chỉ thị và khai báo bộ điều khiển của chỉ thị tại đó. Một cái gì đó tương tự như sau (đã không kiểm tra nó):

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

Để biết thêm thông tin, tham khảo AngularJS documentation on directives.