Entrée AngularJS ng-model non mise à jour

Je suis en train de créer un simple pagination directive isolé portée. Pour une raison quelconque, quand j'ai modifier manuellement la valeur cela devient un peu compliqué. Voici mon problème:

Quand j'ai la page vers l'avant et vers l'arrière, il fonctionne très bien. Génial

Quand je rentre d'une page dans le champ, il fonctionne. Grand

Cependant, si je entrer une page dans le champ, puis essayer d'aller de l'avant et vers l'arrière, la ng-model semble pause après je entrer une page dans le champ. Je l'ai eu à travailler quand je n'ai pas d'isoler ma portée, mais je suis confus quant à pourquoi elle allait se briser. Voici mon code:

HTML:

<paginate go-to-page="goToPage(page)" total-pages="results.hits.pages" total-hits="results.hits.total"></paginate>

Directive:

'use strict';

angular.module('facet.directives')
    .directive('paginate', function(){
        return {
            restrict: 'E',
            template: '<div class="pull-right" ng-if="(totalPages !== undefined) && (totalPages > 0)">'+
                '<span class="left-caret hoverable" ng-click="changePage(current-1)" ng-show="current > 1"></span>&nbsp;&nbsp;Page'+
                '&nbsp;&nbsp;&nbsp;<input type="number" ng-model="current" class="pagination-input" ng-keypress="enterPage($event)"/> of'+
                '&nbsp;&nbsp;&nbsp;{{totalPages}}&nbsp;&nbsp;'+
                '<span class="right-caret hoverable" ng-click="changePage(current+1)" ng-show="current < totalPages"></span>'+
            '</div>',
            scope: {
                goToPage: '&',
                totalPages: '=',
                totalHits: '='
            },
            link: function(scope) {
                scope.current = 1;
                scope.changePage = function(page) {
                    scope.current = page;
                    window.scrollTo(0,0);
                    scope.goToPage({page:page});
                };
                scope.enterPage = function(event) {
                    if(event.keyCode == 13) {
                        scope.changePage(scope.current);
                    }
                }
            }
        }
    });

Ce que je fais mal?

source d'informationauteur user1200387

  1. 11

    Veuillez toujours essayer d'utiliser un modèle plutôt que d'utiliser les types primitifs, tandis que l'aide de la ng-modèle en raison de l'javascript prototype de hiérarchies.

    angular.module('facet.directives').directive('paginate', function () {
    return {
        restrict: 'E',
        replace: true,
        template: '<div class="pull-right discovery-pagination" ng-if="(totalPages !== undefined) && (totalPages > 0)">' +
            '<span class="left-caret hoverable" ng-click="changePage(current-1)" ng-show="current > 1"></span>&nbsp;&nbsp;Page' +
            '&nbsp;&nbsp;&nbsp;<input type="number" ng-model="current.paging" class="pagination-input" ng-keypress="enterPage($event)"/> of' +
            '&nbsp;&nbsp;&nbsp;{{totalPages}}&nbsp;&nbsp;' +
            '<span class="right-caret hoverable" ng-click="changePage(current+1)" ng-show="current < totalPages"></span>' +
            '</div>',
        scope: {
            goToPage: '&',
            totalPages: '=',
            totalHits: '='
        },
        link: function(scope) {
            scope.current = {paging:1};
            scope.changePage = function(page) {
                scope.current.paging = page;
                window.scrollTo(0, 0);
                scope.goToPage({ page: page });
            };
            scope.enterPage = function(event) {
                if (event.keyCode == 13) {
                    scope.changePage(scope.current.paging);
                }
            };
        }
    };
});

    Espère que cela permettra de résoudre votre problème 🙂

    Pour le détail à ce sujet, s'il vous plaît aller à travers Compréhension-Portées

  2. 15

    Méfiez-vous des ng-if - il crée un nouveau champ d'application. Si vous le changer pour juste ng-show, votre exemple va fonctionner très bien. Si vous voulez utiliser ng-ifcréer un objet pour stocker la portée de la variable current. Peut-être quelque chose comme scope.state.current?

    scope.state = {
    current: 1
};

    Pour éviter la confusion de ce genre, j'ai toujours garder mes liaisons something.something et jamais juste something.

    Edit: Bonne explication ici - http://egghead.io/lessons/angularjs-the-dot