Ingresso AngularJS modello ng non aggiornato

Question

Sto provando a creare una semplice direttiva di impaginazione con un ambito isolato. Per qualche motivo, quando cambio manualmente il valore, diventa un po 'schizzinoso. Ecco il mio problema:

Quando pagina avanti e indietro, funziona alla grande. Impressionante

Quando inserisco una pagina nel campo funziona. Great

Tuttavia, se inserisco una pagina nel campo e poi provo ad andare avanti e indietro, il modello ng sembra rompere dopo aver inserito una pagina nel campo. L'ho fatto funzionare quando non ho isolato il mio telescopio, ma sono confuso sul motivo per cui lo romperà. Ecco il mio codice:

HTML:

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

direttiva:

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

Che cosa sto facendo di sbagliato?

Answer 1

Si prega di cercare sempre di utilizzare il modello invece di usare i tipi primitivi mentre si utilizza il modello ng causa delle gerarchie prototipo del 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); 
       } 
      }; 
     } 
    }; 
}); 

Spero che questo risolverà il vostro problema :)

Per dettagli su questo, si prega di passare attraverso Understanding-Scopes

Answer 2

Attenzione a ng-if - crea un nuovo ambito. Se lo cambi solo con ng-show, il tuo esempio funzionerebbe correttamente. Se si desidera utilizzare ng-if, creare un oggetto per memorizzare la variabile di ambito current. Forse qualcosa come scope.state.current?

scope.state = { 
    current: 1 
}; 

Per evitare confusione come questo, tengo sempre i miei attacchi come something.something e mai solo something.

Edit: buona spiegazione qui - http://egghead.io/lessons/angularjs-the-dot