AngularJS輸入ng-model不更新

Question

我想創建一個簡單的分頁指令與一個孤立的範圍。出於某種原因，當我手動更改數值時，它會變得有點挑剔。這是我的問題：

當我向前和向後翻頁時，它的效果很好。真棒

當我進入一個頁面到它的工作領域。很好

但是，如果我在字段中輸入一個頁面，然後嘗試前進和後退，那麼在我將一個頁面輸入到字段後，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); 
        } 
       } 
      } 
     } 
    }); 

我在做什麼錯？

Answer 1

請始終嘗試使用模式，而不是使用原始類型，同時使用，因爲JavaScript的原型層次的NG-模型。

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

Answer 2

當心ng-if - 它創建了一個新的範圍。如果您將其更改爲僅顯示，您的示例將正常工作。如果您確實想要使用ng-if，請創建一個對象來存儲範圍變量current。也許像scope.state.current？

scope.state = { 
    current: 1 
}; 

爲了避免混淆這個樣子，我總是把我的綁定爲something.something和永遠只是something。

編輯：這很好的解釋 - http://egghead.io/lessons/angularjs-the-dot