Wejście AngularJS nie aktualizuje modelu

Question

Próbuję utworzyć prostą dyrektywę paginacji z izolowanym zasięgiem. Z jakiegoś powodu, kiedy ręcznie zmieniam wartość, uzyskuje się odrobinę finnicky. Oto mój problem:

Kiedy strona naprzód i wstecz, działa świetnie. Awesome

Kiedy wchodzę na stronę do pola, to działa. Great

Jeśli jednak wprowadzę stronę do pola, a następnie spróbuję przejść do przodu i do tyłu, model ng wydaje się łamać po wprowadzeniu strony do pola. Miałem to działa, gdy nie izolowałem mojego zakresu, ale jestem zdezorientowany, dlaczego go złamać. Tu jest mój kodu:

HTML:

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

dyrektywa:

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

Co robię źle?

Answer 1

Proszę zawsze próbować używać modelu raczej niż przy użyciu prymitywnych typów podczas korzystania z NG-modelu z powodu prototypowych hierarchii Javascript jest.

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

nadzieję, że to rozwiąże problem :)

Dla szczegółów na ten temat, proszę przejść przez Understanding-Scopes

Answer 2

Uwaga na ng-if - tworzy nowy zakres. Jeśli zmienisz go tak, aby wyświetlał tylko ng-show, twój przykład będzie działał poprawnie. Jeśli chcesz użyć ng-if, utwórz obiekt do przechowywania zmiennej zasięgu current. Może coś w stylu scope.state.current?

scope.state = { 
    current: 1 
}; 

Aby uniknąć nieporozumień tak, ja zawsze zachowywać moje powiązania jako something.something i nie tylko something.

Edit: Dobra wyjaśnienie tutaj - http://egghead.io/lessons/angularjs-the-dot