AngularJS: Utiliser la directive éléments dans le Contrôleur

Je suis en train de faire une pagination application où l'utilisateur peut basculer creux pages dans la même fenêtre (pages s'affichent les uns en dessous des autres). Chaque fois que quelqu'un change la page, je veux la fenêtre pour faire défiler la page de droite

C'est ma page directive:

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

Cela fonctionne, mais maintenant, chaque directive est à l'écoute des pageChanged événement, et agit en conséquence. Je préfère pour n'écouter que dans le contrôleur et laisser le contrôleur de défilement de la fenêtre, à droite de la page. (de cette façon, une seule fonction doit être évaluée).

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

Pour ce faire, cependant j'ai besoin d'avoir accès aux éléments des pages dans le contrôleur, il est un moyen de faire cela?

J'étais également à la recherche d'une méthode qui pourrait changer le currentPage à droite de la page lorsque l'utilisateur fait défiler la fenêtre.

OriginalL'auteur arnoutaertgeerts | 2013-08-20

  1. 23

    Je pense que vous ne devriez pas compter sur les événements, mais d'ajouter une controller propriété de la directive de l'objet et de déclarer la directive du contrôleur. Quelque chose de similaire à ceci (ne l'ai pas testé):

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

    Pour plus d'informations, consulter le AngularJS documentation sur les directives.

    Je suis d'accord, mais exactement comment peut-on choisir d'aller à la page de droite? N'ai-je pas besoin de les différents éléments de la page dans mon contrôleur pour que cela fonctionne? Parce que chaque page a une autre contrôleur?

    OriginalL'auteur Alejandro García Iglesias