मैं $ स्कोप का उपयोग कैसे करूं। $ घड़ी और $ स्कोप। $ AngularJS में आवेदन करें?




angularjs-scope (6)

मुझे समझ में नहीं आता कि $scope.$watch का उपयोग कैसे करें $scope.$watch और $scope.$apply । आधिकारिक दस्तावेज उपयोगी नहीं है।

जो मैं विशेष रूप से समझ में नहीं आता:

  • क्या वे डोम से जुड़े हुए हैं?
  • मैं मॉडल में डीओएम परिवर्तन कैसे अपडेट कर सकता हूं?
  • उनके बीच कनेक्शन बिंदु क्या है?

मैंने इस ट्यूटोरियल की कोशिश की, लेकिन यह $watch की समझ लेता है और $apply लिए $apply है।

$apply क्या करते हैं और $watch करते हैं, और मैं उन्हें उचित तरीके से कैसे उपयोग करूं?


AngularJS में, हम अपने मॉडल अपडेट करते हैं, और हमारे विचार / टेम्पलेट डीओएम को स्वचालित रूप से अपडेट करते हैं (अंतर्निर्मित या कस्टम निर्देशों के माध्यम से)।

स्कोप विधियों के रूप में $ लागू और $ घड़ी, डीओएम से संबंधित नहीं हैं।

Concepts पृष्ठ (अनुभाग "रनटाइम") में $ पाचन लूप, $ लागू, $ evalAsync कतार और $ घड़ी सूची का एक बहुत अच्छा स्पष्टीकरण है। पाठ के साथ चित्र यहां दिया गया है:

जो भी कोड किसी दायरे तक watchExpression - आम तौर पर नियंत्रक और निर्देश (उनके लिंक फ़ंक्शंस और / या उनके नियंत्रक) - एक " watchExpression " सेट कर सकते हैं जो AngularJS उस दायरे के विरुद्ध मूल्यांकन करेगा। यह मूल्यांकन तब होता है जब AngularJS अपने $ पाचन लूप (विशेष रूप से, "$ घड़ी सूची" पाश) में प्रवेश करता है। आप व्यक्तिगत स्कोप गुण देख सकते हैं, आप एक साथ दो गुणों को देखने के लिए एक फ़ंक्शन को परिभाषित कर सकते हैं, आप एक सरणी की लंबाई देख सकते हैं आदि।

जब चीजें "AngularJS के अंदर होती हैं" - उदाहरण के लिए, आप एक टेक्स्टबॉक्स में टाइप करते हैं जिसमें AngularJS दो-तरफा डाटाबेसिंग सक्षम है (यानी, एनजी-मॉडल का उपयोग करता है), एक $ http कॉलबैक आग, आदि - $ आवेदन पहले से ही कॉल किया जा चुका है, इसलिए हम उपरोक्त आकृति में "AngularJS" आयताकार के अंदर फिर से है। सभी watchExpressions का मूल्यांकन किया जाएगा (संभवतः एक से अधिक बार - जब तक कोई और परिवर्तन नहीं पता चला)।

जब चीजें "AngularJS के बाहर होती हैं" - उदाहरण के लिए, आपने निर्देश में बाध्य () का उपयोग किया और फिर उस घटना को आग लग गई, जिसके परिणामस्वरूप आपका कॉलबैक बुलाया गया, या कुछ jQuery पंजीकृत कॉलबैक आग - हम अभी भी "मूल" आयताकार में हैं। यदि कॉलबैक कोड कुछ भी संशोधित करता है कि कोई भी $ घड़ी देख रही है, तो AngularJS आयताकार में प्रवेश करने के लिए $ $ पर कॉल करें, जिससे $ पाचन लूप चलने का कारण बनता है, और इसलिए AngularJS परिवर्तन को नोटिस करेगा और उसका जादू करेगा।


AngularJS इस घटनाओं-लूप को बढ़ाता है, जिसे AngularJS context कहा जाता AngularJS context

$ घड़ी ()

जब भी आप यूआई में कुछ बांधते हैं तो आप $watch सूची में $watch डालते हैं

User: <input type="text" ng-model="user" />
Password: <input type="password" ng-model="pass" />

यहां हमारे पास $scope.user , जो पहले इनपुट से जुड़ा हुआ है, और हमारे पास $scope.pass , जो दूसरे के लिए बाध्य है। ऐसा करने से हम $watch सूची में दो $watch es जोड़ते हैं।

जब हमारे टेम्पलेट को लोड किया जाता है, लिंकिंग चरण में AKA, संकलक प्रत्येक निर्देश की तलाश करेगा और आवश्यक सभी $watch es बनाता है।

AngularJS $watch , $watchcollection और $watch(true) । नीचे गहराई से देखने वालों से ली गई सभी तीनों को समझाते हुए एक साफ आरेख है।

angular.module('MY_APP', []).controller('MyCtrl', MyCtrl)
function MyCtrl($scope,$timeout) {
  $scope.users = [{"name": "vinoth"},{"name":"yusuf"},{"name":"rajini"}];

  $scope.$watch("users", function() {
    console.log("**** reference checkers $watch ****")
  });

  $scope.$watchCollection("users", function() {
    console.log("**** Collection  checkers $watchCollection ****")
  });

  $scope.$watch("users", function() {
    console.log("**** equality checkers with $watch(true) ****")
  }, true);

  $timeout(function(){
     console.log("Triggers All ")
     $scope.users = [];
     $scope.$digest();

     console.log("Triggers $watchCollection and $watch(true)")
     $scope.users.push({ name: 'Thalaivar'});
     $scope.$digest();

     console.log("Triggers $watch(true)")
     $scope.users[0].name = 'Superstar';
     $scope.$digest();
  });
}

http://jsfiddle.net/2Lyn0Lkb/

$digest पाश

जब ब्राउज़र को एक ईवेंट प्राप्त होता है जिसे AngularJS संदर्भ द्वारा प्रबंधित किया जा सकता है तो $digest लूप निकाल दिया जाएगा। यह पाश दो छोटे loops से बना है। एक $evalAsync कतार को संसाधित करता है, और दूसरा $watch list संसाधित करता है। हमारे पास $watch की सूची के माध्यम से $digest लूप होगा

app.controller('MainCtrl', function() {
  $scope.name = "vinoth";

  $scope.changeFoo = function() {
      $scope.name = "Thalaivar";
  }
});

{{ name }}
<button ng-click="changeFoo()">Change the name</button>

यहां हमारे पास केवल एक $watch क्योंकि एनजी-क्लिक कोई घड़ियों नहीं बनाता है।

हम बटन दबाते हैं।

  1. ब्राउज़र को एक ईवेंट प्राप्त होता है जो AngularJS संदर्भ में प्रवेश करेगा
  2. $digest लूप चलाएगा और परिवर्तनों के लिए हर $ घड़ी से पूछेगा।
  3. चूंकि $ scope.name में परिवर्तनों के लिए देख रहे $watch में बदलाव आया है, यह एक और $digest लूप को मजबूर करेगा।
  4. नया लूप कुछ भी रिपोर्ट नहीं करता है।
  5. ब्राउज़र को नियंत्रण वापस मिल जाता है और यह $ scope.name के नए मान को दर्शाते हुए डीओएम अपडेट करेगा
  6. यहां महत्वपूर्ण बात यह है कि एंगुलरजेएस संदर्भ में प्रवेश करने वाली हर घटना एक $digest लूप चलाएगी। इसका मतलब यह है कि जब भी हम इनपुट में एक पत्र लिखते हैं, तो लूप इस पृष्ठ में हर $watch जांच करेगा।

लागू $ ()

यदि आप किसी ईवेंट को निकाल दिए जाने पर $apply कॉल करते हैं, तो यह कोणीय-संदर्भ से गुज़र जाएगा, लेकिन यदि आप इसे कॉल नहीं करते हैं, तो यह इसके बाहर चला जाएगा। यह बेहद आसान है। $apply $digest() लूप को आंतरिक रूप से कॉल करेगा और यह सुनिश्चित करने के लिए सभी घड़ियों पर फिर से चालू होगा कि DOM को नए अपडेट किए गए मान के साथ अपडेट किया गया है।

$apply() विधि पूरे $scope चेन पर वॉचर्स को ट्रिगर करेगी जबकि $digest() विधि केवल मौजूदा $scope और उसके children पर वॉचर्स को ट्रिगर करेगी। जब किसी भी उच्च-स्तरीय $scope ऑब्जेक्ट्स को स्थानीय परिवर्तनों के बारे में जानने की आवश्यकता नहीं होती है, तो आप $digest() उपयोग कर सकते हैं।


इस ब्लॉग को उन सभी को शामिल किया गया है जो उदाहरण और समझने योग्य स्पष्टीकरण बनाते हैं।

AngularJS $scope कार्य $watch(), $digest() और $apply() AngularJS में केंद्रीय कार्यों में से कुछ हैं। AngularJS को समझने के लिए $watch() , $digest() और $apply() को समझना आवश्यक है।

जब आप $ व्यू ऑब्जेक्ट पर एक चर के लिए अपने दृश्य में कहीं से डेटा बाध्यकारी बनाते हैं, तो AngularJS आंतरिक रूप से "घड़ी" बनाता है। एक घड़ी का मतलब है कि AngularJS $scope object पर चर में परिवर्तन देखता है। ढांचा चरम "देख रहा है"। घड़ियां $scope.$watch() का उपयोग करके बनाई गई हैं $scope.$watch() Watch $scope.$watch() फ़ंक्शन जिसे मैं बाद में इस पाठ में शामिल करूंगा।

आपके एप्लिकेशन में महत्वपूर्ण बिंदुओं पर AngularJS $scope.$digest() कहता है $scope.$digest() फ़ंक्शन। यह फ़ंक्शन सभी घड़ियों के माध्यम से पुनरावृत्त होता है और चेक करता है कि कोई भी देखा चर बदल गया है। यदि एक देखा चर बदल गया है, एक संबंधित श्रोता समारोह कहा जाता है। श्रोता फ़ंक्शन जो भी काम करता है उसे करता है, उदाहरण के लिए देखे गए चर के नए मान को प्रतिबिंबित करने के लिए एक HTML टेक्स्ट बदलना। इस प्रकार, $digest() फ़ंक्शन वह है जो अद्यतन करने के लिए बाध्यकारी डेटा को ट्रिगर करता है।

अधिकांश समय AngularJS $ scope को कॉल करेगा। $ Watch () और $scope.$digest() आपके लिए फ़ंक्शंस, लेकिन कुछ परिस्थितियों में आपको उन्हें स्वयं कॉल करना पड़ सकता है। इसलिए यह जानना वाकई अच्छा है कि वे कैसे काम करते हैं।

$scope.$apply() फ़ंक्शन का उपयोग कुछ कोड निष्पादित करने के लिए किया जाता है, और उसके बाद $scope.$digest() को कॉल करें, इसलिए सभी घड़ियों की जांच की जाती है और इसी घड़ी श्रोता फ़ंक्शन को कॉल किया जाता है। अन्य कोड के साथ AngularJS को एकीकृत करते समय $apply() फ़ंक्शन उपयोगी होता है।

मैं इस पाठ के शेष में $watch(), $digest() और $apply() फ़ंक्शंस के बारे में अधिक जानकारी प्राप्त करूंगा।

$ घड़ी ()

$scope.watch() फ़ंक्शन कुछ चर की घड़ी बनाता है। जब आप घड़ी देखते हैं तो आप $watch() फ़ंक्शन के पैरामीटर के रूप में दो फ़ंक्शन पास करते हैं:

  • एक मूल्य समारोह
  • एक श्रोता समारोह

यहाँ एक उदाहरण है:

$scope.$watch(function() {},
              function() {}
             );

पहला फ़ंक्शन मान फ़ंक्शन है और दूसरा फ़ंक्शन श्रोता फ़ंक्शन है।

मान फ़ंक्शन को उस मान को वापस करना चाहिए जो देखा जा रहा है। AngularJS तब घड़ी के फ़ंक्शन को पिछली बार लौटाए गए मान के विरुद्ध लौटाए गए मूल्य की जांच कर सकता है। इस तरह AngularJS निर्धारित कर सकता है कि मूल्य बदल गया है या नहीं। यहाँ एक उदाहरण है:

$scope.$watch(function(scope) { return scope.data.myVar },
              function() {}
             );

यह उदाहरण वैल्यू फ़ंक्शन $scope वैरिएबल scope.data.myVar । यदि इस चर के मान में परिवर्तन होता है, तो एक अलग मान वापस कर दिया जाएगा, और AngularJS श्रोता समारोह को कॉल करेगा।

ध्यान दें कि मूल्य फ़ंक्शन पैरामीटर के रूप में दायरा कैसे लेता है (नाम में $ के बिना)। इस पैरामीटर के माध्यम से मान फ़ंक्शन $scope और इसके चरों तक पहुंच सकता है। यदि आप की आवश्यकता हो तो वैल्यू फ़ंक्शन ग्लोबल वैरिएबल भी देख सकता है, लेकिन अक्सर आप $scope वैरिएबल देखेंगे।

श्रोता समारोह को जो भी करना है, उसे करना चाहिए यदि मूल्य बदल गया है। शायद आपको किसी अन्य चर की सामग्री को बदलने की आवश्यकता है, या किसी HTML तत्व या किसी सामग्री की सामग्री सेट करनी है। यहाँ एक उदाहरण है:

$scope.$watch(function(scope) { return scope.data.myVar },
              function(newValue, oldValue) {
                  document.getElementById("").innerHTML =
                      "" + newValue + "";
              }
             );

यह उदाहरण एक तत्व तत्व के आंतरिक HTML को वैरिएबल के नए मान पर सेट करता है, जो बी तत्व में एम्बेडेड होता है जो मूल्य को बोल्ड बनाता है। बेशक आप कोड {{ data.myVar } कोड का उपयोग करके ऐसा कर सकते थे, लेकिन यह श्रोताओं के फ़ंक्शन के अंदर आप क्या कर सकते हैं इसका एक उदाहरण है।

$ डाइजेस्ट ()

$scope.$digest() फ़ंक्शन $scope object में सभी घड़ियों के माध्यम से पुन: सक्रिय होता है, और इसके बच्चे $ स्कोप ऑब्जेक्ट्स (यदि इसमें कोई है)। जब $digest() घड़ियों पर पुनरावृत्त होता है, तो यह प्रत्येक घड़ी के लिए मान फ़ंक्शन को कॉल करता है। यदि मान फ़ंक्शन द्वारा लौटाया गया मान उस मूल्य से भिन्न होता है जिसे पिछली बार कॉल किया गया था, तो उस घड़ी के श्रोता फ़ंक्शन को कॉल किया जाता है।

$digest() फ़ंक्शन को तब भी कहा जाता है जब AngularJS सोचता है कि यह आवश्यक है। उदाहरण के लिए, एक बटन क्लिक करने के बाद हैंडलर निष्पादित किया गया है, या AJAX कॉल रिटर्न के बाद (पूरा () / विफल () कॉलबैक फ़ंक्शन निष्पादित करने के बाद)।

आपको कुछ कोने के मामले मिल सकते हैं जहां AngularJS आपके लिए $digest() फ़ंक्शन नहीं कहता है। आमतौर पर आप यह ध्यान देकर पता लगाएंगे कि डेटा बाइंडिंग प्रदर्शित मूल्यों को अपडेट नहीं करती है। उस स्थिति में, $scope.$digest() कॉल करें $scope.$digest() और इसे काम करना चाहिए। या, आप शायद $scope.$apply() उपयोग कर सकते हैं $scope.$apply() इसके बजाय मैं अगले खंड में समझाऊंगा।

लागू $ ()

$scope.$apply() फ़ंक्शन एक फ़ंक्शन को पैरामीटर के रूप में लेता है जिसे निष्पादित किया जाता है, और उस $scope.$digest() बाद $scope.$digest() को आंतरिक रूप से कहा जाता है। यह आपके लिए यह सुनिश्चित करना आसान बनाता है कि सभी घड़ियों की जांच हो, और इस प्रकार सभी डेटा बाइंडिंग ताज़ा हो जाएं। यहां एक $apply() उदाहरण है:

$scope.$apply(function() {
    $scope.data.myVar = "Another value";
});

फ़ंक्शन $apply() फ़ंक्शन पर पास किया गया है क्योंकि पैरामीटर $scope.data.myVar के मान को बदल $scope.data.myVar । जब कार्य से निकलता है AngularJS $scope.$digest() को कॉल करेगा $scope.$digest() फ़ंक्शन ताकि सभी घड़ियों को देखे गए मानों में परिवर्तनों के लिए चेक किया जा सके।

उदाहरण

उदाहरण के लिए $watch() , $digest( ) और $apply() काम करता है, इस उदाहरण को देखें:

<div ng-controller="myController">
    {{data.time}}

    <br/>
    <button ng-click="updateTime()">update time - ng-click</button>
    <button id="updateTimeButton"  >update time</button>
</div>


<script>
    var module       = angular.module("myapp", []);
    var myController1 = module.controller("myController", function($scope) {

        $scope.data = { time : new Date() };

        $scope.updateTime = function() {
            $scope.data.time = new Date();
        }

        document.getElementById("updateTimeButton")
                .addEventListener('click', function() {
            console.log("update time clicked");
            $scope.data.time = new Date();
        });
    });
</script>

उसका उदाहरण $scope.data.time चर को एक इंटरपोलेशन निर्देश से $scope.data.time जो चरम मान को HTML पृष्ठ में विलीन करता है। यह बाध्यकारी $scope.data.time variable पर आंतरिक रूप से घड़ी बनाता है।

उदाहरण में दो बटन भी शामिल हैं। पहले बटन में एक ng-click श्रोता संलग्न है। जब उस बटन को $scope.updateTime() फ़ंक्शन पर क्लिक किया जाता है, और उसके बाद AngularJS $scope.$digest() कहता $scope.$digest() ताकि डेटा बाइंडिंग अपडेट हो जाएं।

दूसरा बटन नियंत्रक फ़ंक्शन के अंदर से एक मानक जावास्क्रिप्ट इवेंट श्रोता से जुड़ा होता है। जब दूसरा बटन क्लिक किया जाता है तो श्रोता फ़ंक्शन निष्पादित होता है। जैसा कि आप देख सकते हैं, दोनों बटनों के लिए श्रोता फ़ंक्शन लगभग समान होते हैं, लेकिन जब दूसरे बटन के श्रोता फ़ंक्शन को कॉल किया जाता है, तो डेटा बाइंडिंग अपडेट नहीं होती है। इसका कारण यह है कि दूसरे बटन के ईवेंट श्रोता को निष्पादित करने के बाद $scope.$digest() को कॉल नहीं किया जाता है। इस प्रकार, यदि आप दूसरे बटन पर क्लिक करते हैं तो समय $scope.data.time चर में अपडेट किया जाता है, लेकिन नया समय कभी प्रदर्शित नहीं होता है।

इसे ठीक करने के लिए हम एक $scope.$digest() जोड़ सकते हैं $scope.$digest() बटन ईवेंट श्रोता की अंतिम पंक्ति पर कॉल करें, इस तरह:

document.getElementById("updateTimeButton")
        .addEventListener('click', function() {
    console.log("update time clicked");
    $scope.data.time = new Date();
    $scope.$digest();
});

बटन श्रोता फ़ंक्शन के अंदर $digest() को कॉल करने के बजाय आप इस तरह के $apply() फ़ंक्शन का उपयोग भी कर सकते थे:

document.getElementById("updateTimeButton")
        .addEventListener('click', function() {
    $scope.$apply(function() {
        console.log("update time clicked");
        $scope.data.time = new Date();
    });
});

नोटिस करें कि $scope.$apply() फ़ंक्शन बटन ईवेंट श्रोता के अंदर से कॉल किया जाता है, और $scope.data.time चर का अद्यतन $apply() फ़ंक्शन के पैरामीटर के रूप में पारित फ़ंक्शन के अंदर किया जाता है। जब $apply() फ़ंक्शन कॉल समाप्त होता है AngularJS आंतरिक रूप से $digest() कॉल करता है, इसलिए सभी डेटा बाइंडिंग अपडेट की जाती हैं।


आपको यह समझने की आवश्यकता है कि AngularJS इसे समझने के लिए कैसे काम करता है।

डाइजेस्ट चक्र और $ गुंजाइश

सबसे पहले और सबसे महत्वपूर्ण, AngularJS एक तथाकथित पाचन चक्र की अवधारणा को परिभाषित करता है। इस चक्र को लूप के रूप में माना जा सकता है, जिसके दौरान AngularJS जांचता है कि क्या सभी $scope द्वारा देखे गए सभी चरों में कोई बदलाव है। इसलिए यदि आपके पास $scope.myVar नियंत्रक है। $scope.myVar आपके नियंत्रक में परिभाषित किया गया है और इस चर को देखने के लिए चिह्नित किया गया था, तो आप लूप के प्रत्येक पुनरावृत्ति में myVar पर हुए परिवर्तनों की निगरानी करने के लिए एंगुलरजेएस को स्पष्ट रूप से बता रहे हैं।

एक प्राकृतिक अनुवर्ती प्रश्न होगा: क्या सब कुछ $scope से जुड़ा हुआ है? सौभाग्य से, नहीं। यदि आप अपने $scope में प्रत्येक ऑब्जेक्ट में बदलावों के लिए देखेंगे, तो तुरंत एक डाइजेस्ट लूप का मूल्यांकन करने में आयु लग जाएगी और आप जल्दी से प्रदर्शन समस्याओं में भाग लेंगे। यही कारण है कि एंगुलरजेएस टीम ने हमें देखा जा रहा है (नीचे पढ़ें) के रूप में कुछ $scope चर घोषित करने के दो तरीके दिए।

$ घड़ी $ स्कोप परिवर्तनों को सुनने में मदद करता है

देखा जा रहा एक $scope चर घोषित करने के दो तरीके हैं।

  1. अभिव्यक्ति <span>{{myVar}}</span> माध्यम से इसे अपने टेम्पलेट में उपयोग करके
  2. इसे $watch सेवा के माध्यम से मैन्युअल रूप से जोड़कर

विज्ञापन 1) यह सबसे आम परिदृश्य है और मुझे यकीन है कि आपने इसे पहले देखा है, लेकिन आपको नहीं पता था कि इसने पृष्ठभूमि में एक घड़ी बनाई है। हाँ, यह था! AngularJS निर्देशों का उपयोग करना (जैसे ng-repeat ) भी अंतर्निहित घड़ियों बना सकते हैं।

विज्ञापन 2) इस तरह आप अपनी खुद की घड़ियों बनाते हैं। $watch सेवा आपको कुछ कोड चलाने में मदद करती है जब $scope जुड़ा कुछ मूल्य बदल गया है। इसका शायद ही कभी उपयोग किया जाता है, लेकिन कभी-कभी सहायक होता है। उदाहरण के लिए, यदि आप हर बार 'myVar' में कुछ कोड चलाने के लिए चाहते हैं, तो आप निम्न कार्य कर सकते हैं:

function MyController($scope) {

    $scope.myVar = 1;

    $scope.$watch('myVar', function() {
        alert('hey, myVar has changed!');
    });

    $scope.buttonClicked = function() {
        $scope.myVar = 2; // This will trigger $watch expression to kick in
    };
}

$ आवेदन पाचन चक्र के साथ परिवर्तन को एकीकृत करने में सक्षम बनाता है

आप एकीकरण तंत्र के रूप में $apply कार्य के बारे में सोच सकते हैं। आप देखते हैं, प्रत्येक बार जब आप सीधे $scope ऑब्जेक्ट से जुड़े कुछ देखे गए चर को बदलते हैं, तो AngularJS को पता चलेगा कि परिवर्तन हुआ है। ऐसा इसलिए है क्योंकि AngularJS पहले से ही उन परिवर्तनों की निगरानी करने के लिए जानता था। तो अगर यह ढांचे द्वारा प्रबंधित कोड में होता है, तो पाचन चक्र जारी रहेगा।

हालांकि, कभी-कभी आप AngularJS दुनिया के बाहर कुछ मूल्य बदलना चाहते हैं और सामान्य रूप से परिवर्तनों को प्रसारित करना चाहते हैं। इस पर विचार करें - आपके पास $scope.myVar मान है जिसे jQuery के $.ajax() हैंडलर में संशोधित किया जाएगा। यह भविष्य में किसी बिंदु पर होगा। AngularJS ऐसा होने की प्रतीक्षा नहीं कर सकता है, क्योंकि इसे jQuery पर प्रतीक्षा करने का निर्देश नहीं दिया गया है।

इससे निपटने के लिए, $apply शुरू किया गया है। यह आपको पाचन चक्र को स्पष्ट रूप से शुरू करने देता है। हालांकि, आपको केवल कुछ डेटा एंगुलरजेएस (अन्य ढांचे के साथ एकीकरण) में माइग्रेट करने के लिए इसका उपयोग करना चाहिए, लेकिन इस विधि का नियमित नियमित कोणीय जेएस कोड के साथ संयुक्त रूप से उपयोग नहीं करना चाहिए, क्योंकि AngularJS तब एक त्रुटि फेंक देगा।

यह सब डोम से कैसे संबंधित है?

खैर, आपको वास्तव में फिर से ट्यूटोरियल का पालन करना चाहिए, अब आप यह सब जानते हैं। पाचन चक्र यह सुनिश्चित करेगा कि यूआई और जावास्क्रिप्ट कोड सिंक्रनाइज़ किए जाएंगे, जब तक कि कुछ भी नहीं बदलता है, तब तक सभी $scope जुड़ी प्रत्येक वॉचर का मूल्यांकन करके। यदि पाचन लूप में कोई और परिवर्तन नहीं होता है, तो इसे समाप्त माना जाता है।

आप वस्तुओं को स्पष्ट रूप से नियंत्रक में $scope ऑब्जेक्ट में संलग्न कर सकते हैं, या सीधे {{expression}} फ़ॉर्म में उन्हें सीधे दृश्य में घोषित कर सकते हैं।

मुझे आशा है कि यह सब कुछ के बारे में कुछ बुनियादी ज्ञान को स्पष्ट करने में मदद करता है।

आगे की रीडिंग्स:


$watchGroup और $watchCollection भी हैं। विशेष रूप से, $watchGroup वास्तव में सहायक होता है यदि आप उस ऑब्जेक्ट को अपडेट करने के लिए फ़ंक्शन को कॉल करना चाहते हैं जिसमें एक दृश्य में एकाधिक गुण हैं जो डोम ऑब्जेक्ट नहीं है, उदाहरण के लिए कैनवास, वेबजीएल या सर्वर अनुरोध में अन्य दृश्य। यहां, प्रलेखन link


मुझे बहुत गहन वीडियो मिले जो $watch , $apply , $digest और पाचन चक्रों को कवर करते हैं:

अवधारणाओं को समझाने के लिए उन वीडियो में उपयोग की जाने वाली कुछ स्लाइडें हैं (केवल अगर, उपर्युक्त लिंक हटा दिए गए हैं / काम नहीं कर रहे हैं)।

उपर्युक्त छवि में, "$ scope.c" नहीं देखा जा रहा है क्योंकि इसका उपयोग किसी भी डेटा बाइंडिंग (मार्कअप में) में नहीं किया जाता है। अन्य दो ( $scope.a और $scope.b ) देखे जाएंगे।

उपर्युक्त छवि से: संबंधित ब्राउज़र ईवेंट के आधार पर, एंगुलरजेएस घटना को कैप्चर करता है, पाचन चक्र करता है (परिवर्तनों के लिए सभी घड़ियों के माध्यम से जाता है), घड़ी कार्यों को निष्पादित करें और डीओएम अपडेट करें। यदि ब्राउज़र की घटनाएं नहीं हैं, तो डाइजेस्ट चक्र को $apply या $digest का उपयोग करके मैन्युअल रूप से ट्रिगर किया जा सकता $digest

$apply बारे में अधिक $apply और $digest :





angularjs-scope