कोणीय जेएस इनपुट एनजी-मॉडल

Question

अपडेट नहीं कर रहा है मैं एक अलग दायरे के साथ एक सरल अंकन निर्देश बनाने की कोशिश कर रहा हूं। कुछ कारणों से जब मैं मैन्युअल रूप से मूल्य बदलता हूं तो यह थोड़ा सा मुश्किल हो जाता है। यहां मेरी समस्या है:

जब मैं आगे और पीछे पृष्ठ करता हूं, तो यह बहुत अच्छा काम करता है। बहुत बढ़िया

जब मैं फ़ील्ड में एक पृष्ठ दर्ज करता हूं तो यह काम करता है। ग्रेट

हालांकि, अगर मैं फ़ील्ड में एक पेज डालता हूं और फिर आगे और पीछे जाने की कोशिश करता हूं, तो एनजी-मॉडल फ़ील्ड में एक पृष्ठ दर्ज करने के बाद टूट जाता है। जब मैं अपने दायरे को अलग नहीं करता था तो मैंने यह काम किया था, लेकिन मैं उलझन में हूं कि यह क्यों टूट जाएगा। यहाँ मेरी कोड है:

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

कृपया हमेशा मॉडल का उपयोग करने के बजाय क्योंकि जावास्क्रिप्ट का प्रोटोटाइप पदानुक्रम की एनजी मॉडल का उपयोग करते समय आदिम प्रकार का उपयोग कर की कोशिश करो।

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