AngularJS入力モデルが更新されない

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

ホープ、あなたがjsFiddleやPlunkrを設定することができUnderstanding-Scopes

Answer 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