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




angularjs-scope (5)

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

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

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

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

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


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

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

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

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

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

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


बस उपर्युक्त, उबाऊ और नींद को पढ़ना समाप्त करें (क्षमा करें लेकिन सच है)। बहुत तकनीकी, गहराई से, विस्तृत, और सूखा। मैं क्यों लिख रहा हूँ? चूंकि एंगुलरजेएस भारी है, इसलिए कई इंटर-कनेक्टेड अवधारणाएं किसी को भी पागल हो सकती हैं। मैंने अक्सर खुद से पूछा, क्या मैं उन्हें समझने के लिए पर्याप्त समझदार नहीं हूं? नहीं! ऐसा इसलिए है क्योंकि बहुत कम शब्दावली के लिए तकनीक के लिए बहुत कम तकनीक की व्याख्या कर सकते हैं! ठीक है, मुझे कोशिश करने दो:

1) वे सभी घटना संचालित चीजें हैं। (मैं हंसी सुनता हूं, लेकिन पढ़ता हूं)

यदि आपको नहीं पता कि घटना-संचालित क्या है, तो सोचें कि आप पृष्ठ पर एक बटन डालते हैं, इसे "ऑन-क्लिक" का उपयोग करके w / फ़ंक्शन को हुक करें, उपयोगकर्ताओं के लिए आपके द्वारा लगाए गए कार्यों को ट्रिगर करने के लिए उस पर क्लिक करने का इंतजार है समारोह। या एसक्यूएल सर्वर / ओरेकल के "ट्रिगर" के बारे में सोचें।

2) $ घड़ी "ऑन-क्लिक" है।

इसके बारे में क्या विशेष है यह पैरामीटर के रूप में 2 कार्य करता है, पहला व्यक्ति घटना से मूल्य देता है, दूसरा मूल्य मान को ध्यान में रखता है ...

3) $ पाचन वह मालिक है जो अथक , ब्ला-ब्ला-ब्ला के आसपास की जांच करता है लेकिन एक अच्छा मालिक है।

4) $ आवेदन आपको उस तरीके से देता है जब आप इसे मैन्युअल रूप से करना चाहते हैं , जैसे असफल-सबूत (यदि ऑन-क्लिक में लात नहीं है, तो आप इसे चलाने के लिए मजबूर करते हैं।)

अब, चलो इसे दृश्य बनाते हैं। विचार को पकड़ने के लिए इसे और भी आसान बनाने के लिए इसे चित्रित करें:

एक भोजनालय में,

- आगंतुकों को ग्राहकों से आदेश लेना चाहिए, यह है

$watch(
  function(){return orders;},
  function(){Kitchen make it;}
);

- प्रबंधक यह सुनिश्चित करने के लिए चारों ओर दौड़ रहा है कि सभी वेटर्स जाग रहे हैं, ग्राहकों से परिवर्तन के किसी भी संकेत के लिए उत्तरदायी हैं। यह $digest()

- अनुरोध पर सभी को ड्राइव करने के लिए स्वामी की अंतिम शक्ति है, यह $apply()


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

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

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

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

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


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





angularjs-scope