Углеродная входная ng-модель не обновляется

Я пытаюсь создать простую директиву с разбивкой по страницам с изолированной областью. По какой-то причине, когда я вручную меняю значение, он становится немного фиктивным. Вот моя проблема:

Когда я перехожу вперед и назад, он отлично работает. Высокий

Когда я ввожу страницу в поле, она работает. Великий

Однако, если я введу страницу в поле, а затем попытаюсь идти вперед и назад, ng-модель, кажется, сломается после ввода страницы в поле. У меня было это, когда я не изолировал свой охват, но я смущен, почему он сломает его. Вот мой код:

HTML:

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

Директива

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

Что я делаю неправильно?

Ответ 1

Пожалуйста, всегда старайтесь использовать модель, а не использовать примитивные типы при использовании ng-модели из-за прототипных иерархий javascript.

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

Надеюсь, это решит вашу проблему:)

Подробнее об этом пройдите Understanding-Scopes

Ответ 2

Остерегайтесь ng-if - он создает новую область. Если вы измените его только на ng-show, ваш пример будет работать нормально. Если вы хотите использовать ng-if, создайте объект для хранения переменной области видимости current. Может быть, что-то вроде scope.state.current?

scope.state = {
    current: 1
};

Чтобы избежать путаницы, я всегда сохраняю привязки как something.something и никогда не просто something.

Изменить: Хорошее объяснение здесь - http://egghead.io/lessons/angularjs-the-dot