AngularJS इनपुट फ़ील्ड नियंत्रक के अंदर सेटटाइमआउट से अपडेट नहीं हो रहा है

मैं एंगुलरजेएस संचालित पृष्ठ के साथ काम कर रहा हूं, और मुझे केवल पढ़ने के लिए इनपुट टेक्स्ट फ़ील्ड (data-ng-model) के साथ दो तरफ बाध्य) के अंदर चलने वाली घड़ी प्रदर्शित करने की आवश्यकता है। चलने वाली घड़ी को अनुकरण करने के लिए, मैं प्रत्येक 1000 मिलीसेकंड फ़ंक्शन को कॉल करने के लिए setTimeout के साथ एक जावास्क्रिप्ट शेड्यूलर का उपयोग कर रहा हूं, जो $ scope'd संपत्ति मान को अद्यतन करता है जो बदले में उस इनपुट टेक्स्ट फ़ील्ड से जुड़ा हुआ है। किसी भी तरह इनपुट फ़ील्ड में मान अपडेट नहीं हो रहा है। इसलिए मैं एक <pre /> टैग डाला और उसकी सामग्री एक jQuery चयनकर्ता का उपयोग करके अपडेट किया गया। यह ठीक काम कर रहा है, तो मैं हो रही इनपुट पाठ फ़ील्ड मूल्य भी अद्यतन करने के लिए हर दूसरे की मदद की जरूरत है।AngularJS इनपुट फ़ील्ड नियंत्रक के अंदर सेटटाइमआउट से अपडेट नहीं हो रहा है

मैं इस उदाहरण के लिए एक jsFiddle की स्थापना की है।

एचटीएमएल नीचे है:

<body data-ng-app="formApp"> 
    <div data-ng-controller="FormCtrl"> 
     Current Date and Time <input type="text" data-ng-model="formData.currentDateTime" readonly="readonly" size="60" /> 
    </div> 
    <pre id="currentDateTime" style="font-size:1.5em;"> 
    </pre> 
</body>

AngularJS अनुप्रयोग मॉड्यूल और नियंत्रक के रूप में घोषित किया गया है इस प्रकार है:

(function() { 
    var formApp = angular.module("formApp", []); 

    formApp.controller("FormCtrl", function ($scope) { 
     $scope.formData = {}; 
     $scope.formData.currentDateTime = new Date().toString(); 

     (function updateCDT() { 
      $scope.formData.currentDateTime = new Date().toString(); 
      document.getElementById("currentDateTime").innerHTML = $scope.formData.currentDateTime; 
      setTimeout(updateCDT, 1000); 
     })(); 
    }); 
})();

स्रोत

2015-04-18 Web User

आप $scope.$apply() उपयोग करने की आवश्यकता या $timeout angulars के बाद से setTimeout बाहर है परिवर्तनों के अनुसार angularjs का दायरा

$ स्कोप का उपयोग करके। $ आवेदन()

$ गुंजाइश लागू होते हैं। $ (SetTimeout की अनाम समारोह के अंदर लागू) (समारोह() {}, 1000) और फिर $ क्षेत्र के लिए की तरह नीचे

(function updateCDT() { 
     $scope.formData.currentDateTime = new Date().toString(); 
     document.getElementById("currentDateTime").innerHTML 
    = $scope.formData.currentDateTime; 
     setTimeout(function(){ 
      $scope.$apply(); 
      updateCDT() 
     }, 1000);

fiddle वास्तविक फ़ंक्शन को कॉल करें। $ लागू()

$ टाइमआउट का उपयोग कर (न भूल नियंत्रक को इसकी सुई देने)

(function updateCDT() { 
      $scope.formData.currentDateTime = new Date().toString(); 
      document.getElementById("currentDateTime").innerHTML 
    = $scope.formData.currentDateTime; 
      $timeout(updateCDT, 1000); 

     })();

$ के लिए fiddle ti meout

स्रोत

2015-04-18 15:30:30

मैं नियंत्रक में '$ टाइमआउट' इंजेक्शन के साथ गया और इसका उपयोग कर रहा था क्योंकि यह क्लीनर ** और ** दिखता है क्योंकि क्रोम डेवलपर टूल्स एक त्रुटि दिखाता है 'त्रुटि: [$ रूटस्कोप: inprog] $ पहले ही प्रगति पर लागू होता है' '$ स्कोप का उपयोग कर $। आवेदन();'। तत्काल सहायता के लिए धन्यवाद! –

@WebUser अपडेट किया गया, अब आपको यह त्रुटि नहीं मिलेगी –

यदि आप सेटटाइमआउट के साथ कोणीय के बाहर दायरे को संशोधित करते हैं तो आपको $scope.$apply पर कॉल करने की आवश्यकता है।

स्रोत

2015-04-18 15:30:51 jcubic

क्रोम डेवलपर टूल एक त्रुटि दिखाता है 'त्रुटि: $ $ स्कोप का उपयोग करते समय [$ rootScope: inprog] $ पहले ही प्रगति पर लागू होता है।$ लागू(); ', इसलिए मैं '$ टाइमआउट' के साथ गया। –

@WebUser आप 'अगर (! $ स्कोप। $$ चरण) { // कॉल $ } ' – jcubic

@WebUser लागू कर सकते हैं या आप $ स्कोप लागू कर सकते हैं। $ SetTimeout (function() के अज्ञात फ़ंक्शन के अंदर $ लागू() {$ स्कोप। $ लागू(); अद्यतनCDT()}, 1000) और फिर वास्तविक फ़ंक्शन –

setTimeout() का उपयोग करने के बजाय आप $timeout() का उपयोग कर सकते हैं जो $apply() आंतरिक रूप से कॉल करेगा जिससे कि पाचन चलाने के लिए कोणीय को बताया जा सके।

बस एक निर्भरता

DEMO

स्रोत

2015-04-18 15:34:20 charlietfl

बस पूर्व टैग में भी ऐसा ही करने के रूप में $timeout सुई याद रखें:

document.getElementById("input-field").value=$scope.formData.currentDateTime;

आशा है कि यह मदद करता है!

स्रोत

2015-04-18 15:36:12 JJPunch

पर कॉल करें मुझे लगता है कि मैं ऐसा कर सकता था, लेकिन मैं इसे AngularJS तरीका करना चाहता था :-) हालांकि इसे सुझाव देने के लिए धन्यवाद। –

AngularJS इनपुट फ़ील्ड नियंत्रक के अंदर सेटटाइमआउट से अपडेट नहीं हो रहा है

उत्तर

संबंधित मुद्दे