AngularJS: Denetleyici

Question

'daki yönerge öğelerini kullanma Kullanıcının aynı pencerede oluklu sayfaları değiştirebileceği bir sayfalandırma uygulaması yapıyorum (sayfalar birbirinin altında görüntülenir).

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

Bu çalışır, ancak şimdi her direktif pageChanged etkinliğini dinleyen ve buna göre davranır: Birisi sayfasını değiştirirse, ben pencere sağ sayfa

Bu benim sayfa yönergesi olduğunu kaydırmak istiyorum. Sadece denetleyicide dinlemeyi ve denetleyicinin pencereyi sağ sayfaya kaydırmasını tercih ederim. (Bu şekilde sadece bir fonksiyon değerlendirilmek zorundadır).

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

ancak denetleyicisi sayfalar öğelerine erişimi olması gerekir Bunu yapmak için bunu yapmanın bir yolu var mı?

Kullanıcı pencereyi kaydırdığında currentPage'i doğru sayfaya değiştirebilecek bir yöntem arıyordum.

Answer 1

Olaylara güvenmemelisiniz, ancak yönerge nesnesine bir controller özelliği ekleyin ve yönergenin denetleyicisini orada belirtin. Buna benzer bir şey (o test etmedim):

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

fazla bilgi için, AngularJS documentation on directives başvurun.