AngularJS giriş ng-modeli güncellenmiyor

Question

Yalıtılmış bir kapsam ile basit bir sayfalandırma yönergesi oluşturmaya çalışıyorum. Bazı sebeplerden dolayı değeri manuel olarak değiştirdiğimde biraz finnicky olur. İşte benim sorunum:

İleri ve geri gittiğimde, harika çalışıyor. Awesome

Alana bir sayfa girdiğimde işe yarıyor. Büyük

Ancak, alana bir sayfa girip ileri ve geri gitmeyi denerseniz, ng-modeli alana bir sayfa girdikten sonra kırılıyor gibi görünüyor. Kapsamımı izole etmediğimde çalışmıştım ama neden kırılacağı konusunda kafam karışmıştı. İşte benim kodudur:

HTML:

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

Yönergesi: Yanlış

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

yapıyorum?

Answer 1

hep modeli kullanmak yerine, çünkü javascript en prototipi hiyerarşilerin ng-modeli kullanırken ilkel türleri kullanarak deneyin.

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

Umut bu sorunu :) Bir jsFiddle veya Plunkr ayarlayabilir misin Understanding-Scopes

Answer 2

ng-if ürününe dikkat edin - yeni bir kapsam yaratır. Bunu sadece ng-show ile değiştirirseniz, örneğiniz iyi çalışır. ng-if kullanmak istiyorsanız, current kapsam değişkenini saklamak için bir nesne oluşturun. Belki scope.state.current gibi bir şey?

scope.state = { 
    current: 1 
}; 

Ben her zaman sadece something something.something olarak benim bağlamaları tutmak ve asla böyle bir karışıklığı önlemek için.

Düzenleme: Burada iyi bir açıklama - http://egghead.io/lessons/angularjs-the-dot