Ngõ vào đầu vào AngularJS không cập nhật

Question

Tôi đang cố gắng tạo một chỉ thị phân trang đơn giản với một phạm vi riêng biệt. Đối với một số lý do khi tôi thay đổi giá trị theo cách thủ công, giá trị này hơi khó tính. Đây là vấn đề của tôi:

Khi tôi chuyển tiếp và lùi, nó hoạt động rất tốt. Awesome

Khi tôi nhập một trang vào trường nó hoạt động. Tuyệt vời

Tuy nhiên, nếu tôi nhập một trang vào trường và sau đó thử tiến lên và lùi, kiểu ng có vẻ sẽ bị ngắt sau khi tôi nhập một trang vào trường. Tôi đã có nó làm việc khi tôi không cô lập phạm vi của tôi nhưng tôi bối rối là tại sao nó sẽ phá vỡ nó. Đây là mã của tôi:

HTML:

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

Chỉ thị:

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

Tôi đang làm gì sai?

Answer 1

Hãy luôn cố gắng sử dụng mô hình chứ không phải sử dụng các loại nguyên thủy trong khi sử dụng ng mô hình vì phân cấp nguyên mẫu của 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); 
       } 
      }; 
     } 
    }; 
}); 

Hy vọng điều này sẽ giải quyết vấn đề của bạn :)

Đối với chi tiết về vấn đề này, xin vui lòng đi qua Understanding-Scopes

Answer 2

Hãy coi chừng ng-if - nó tạo ra phạm vi mới. Nếu bạn thay đổi nó thành chỉ ng-show, ví dụ của bạn sẽ hoạt động tốt. Nếu bạn muốn sử dụng ng-if, hãy tạo một đối tượng để lưu trữ biến phạm vi current. Có lẽ một cái gì đó như scope.state.current?

scope.state = { 
    current: 1 
}; 

Để tránh nhầm lẫn như thế này, tôi luôn luôn giữ cam kết ràng buộc của tôi như something.something và không bao giờ chỉ something.

Edit: Tốt giải thích ở đây - http://egghead.io/lessons/angularjs-the-dot