AngularJS
कोणीय $ scopes

टिप्पणियों

$ गुंजाइश विरासत का मूल उदाहरण

angular.module('app', [])
.controller('myController', ['$scope', function($scope){
    $scope.person = { name: 'John Doe' };
}]);

<div ng-app="app" ng-conroller="myController">
    <input ng-model="person.name" />
    <div ng-repeat="number in [0,1,2,3]">
        {{person.name}} {{number}}
    </div>
</div>

इस उदाहरण में, एनजी-रिपीट निर्देश अपने प्रत्येक नए बनाए गए बच्चों के लिए एक नया दायरा बनाता है।

ये बनाए गए स्कोप्स उनके मूल दायरे के बच्चे हैं (इस मामले में मायकंट्रोलर द्वारा बनाए गए स्कोप), और उसके बाद, वे इसके सभी अनुपातों, जैसे कि व्यक्ति को प्राप्त करते हैं।

आदिम मूल्यों को विरासत में देने से बचें

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

एक आदिम मान (स्ट्रिंग, संख्या, बूलियन, या प्रतीक) को दो अलग-अलग चर में असाइन करना और एक को बदलना, दोनों को नहीं बदलेगा:

var x = 5;
var y = x;
y = 6;
console.log(y === x, x, y); //false, 5, 6

लेकिन एक गैर-आदिम मूल्य के साथ, चूंकि दोनों चर केवल एक ही वस्तु के संदर्भ रखते हैं, एक चर को बदलने से दूसरे को बदल जाएगा :

var x = { name : 'John Doe' };
var y = x;
y.name = 'Jhon';
console.log(x.name === y.name, x.name, y.name); //true, John, John

कोणीय में, जब एक स्कोप बनाया जाता है, तो उसे अपने माता-पिता के सभी गुणों को सौंपा जाता है। हालांकि, बाद में गुणों को बदलना केवल मूल क्षेत्र को प्रभावित करेगा यदि यह एक गैर-आदिम मूल्य है:

angular.module('app', [])
.controller('myController', ['$scope', function($scope){
    $scope.person = { name: 'John Doe' }; //non-primitive
    $scope.name = 'Jhon Doe'; //primitive
}])
.controller('myController1', ['$scope', function($scope){}]);

<div ng-app="app" ng-controller="myController">
    binding to input works: {{person.name}}<br/>
    binding to input does not work: {{name}}<br/>
    <div ng-controller="myController1">
        <input ng-model="person.name" />
        <input ng-model="name" />
    </div>
</div>

याद रखें: कोणीय स्कोप को कई तरीकों से बनाया जा सकता है (जैसे अंतर्निहित या कस्टम निर्देश, या $scope.$new() फ़ंक्शन), और स्कोप ट्री का ट्रैक रखना संभवतः असंभव है।

स्कोप गुण के रूप में केवल गैर-आदिम मूल्यों का उपयोग करना आपको सुरक्षित पक्ष पर रखेगा (जब तक कि आपको विरासत के लिए संपत्ति की आवश्यकता न हो, या अन्य मामले जहां आपको गुंजाइश विरासत के बारे में पता हो)।

पूरे ऐप में उपलब्ध एक फ़ंक्शन

सावधान रहें, इस दृष्टिकोण को कोणीय एप्लिकेशन के लिए एक बुरा डिज़ाइन माना जा सकता है, क्योंकि इसमें प्रोग्रामर को यह याद रखने की आवश्यकता होती है कि दोनों कार्य कहाँ गुंजाइश पेड़ में रखे गए हैं, और गुंजाइश विरासत के बारे में पता होना चाहिए। कई मामलों में एक सेवा को इंजेक्ट करना पसंद किया जाएगा ( कोणीय अभ्यास - गुंजाइश वंशानुक्रम बनाम इंजेक्शन का उपयोग करना ।

यह उदाहरण केवल यह बताता है कि हमारी आवश्यकताओं के लिए किस तरह की गुंजाइश का उपयोग किया जा सकता है, और आप इसका लाभ कैसे उठा सकते हैं, न कि किसी संपूर्ण ऐप को डिज़ाइन करने के सर्वोत्तम तरीकों का।

कुछ मामलों में, हम गुंजाइश वंशानुक्रम का लाभ उठा सकते हैं, और rootScope की संपत्ति के रूप में एक फ़ंक्शन सेट कर सकते हैं। इस तरह - ऐप में सभी स्कोप (अलग-अलग स्कोप को छोड़कर) इस फ़ंक्शन को इनहेरिट करेंगे, और इसे ऐप में कहीं से भी कॉल किया जा सकता है।

angular.module('app', [])
.run(['$rootScope', function($rootScope){
    var messages = []
    $rootScope.addMessage = function(msg){
        messages.push(msg);
    }
}]);

<div ng-app="app">
    <a ng-click="addMessage('hello world!')">it could be accsessed from here</a>
    <div ng-include="inner.html"></div>
</div>

inner.html:

<div>
    <button ng-click="addMessage('page')">and from here to!</button>
</div>

कस्टम $ गुंजाइश घटनाएँ बनाना

सामान्य HTML तत्वों की तरह, $ scopes के लिए अपने स्वयं के ईवेंट होना संभव है। $ गुंजाइश घटनाओं को निम्नलिखित तरीके का उपयोग करके सब्सक्राइब किया जा सकता है:

 $scope.$on('my-event', function(event, args) {
    console.log(args); // { custom: 'data' }
});

यदि आपको किसी ईवेंट श्रोता को अपंजीकृत करने की आवश्यकता है, तो फ़ंक्शन पर $ एक अनबाइंडिंग फ़ंक्शन लौटाएगा। उपरोक्त उदाहरण के साथ जारी रखने के लिए:

var unregisterMyEvent = $scope.$on('my-event', function(event, args) {
    console.log(args); // { custom: 'data' }
    unregisterMyEvent();
});

आपके अपने कस्टम $ स्कोप इवेंट $ ब्रॉडकास्ट और $ एमिट को ट्रिगर करने के दो तरीके हैं । किसी विशिष्ट ईवेंट के क्षेत्र के माता-पिता को सूचित करने के लिए, $ emit का उपयोग करें

$scope.$emit('my-event', { custom: 'data' }); 

उपरोक्त उदाहरण माता my-event पिता के दायरे पर my-event घटना के लिए किसी भी घटना के श्रोताओं को ट्रिगर करेगा और गुंजाइश पेड़ को $ rootScope तक जारी रखेगा, जब तक कि कोई श्रोता इवेंट पर stopPropagation को stopPropagation । केवल $ emit से शुरू होने वाली घटनाएं stopPropagation कह stopPropagation

$ एमिट का रिवर्स $ ब्रॉडकास्ट है , जो स्कोप ट्री में सभी चाइल्ड स्कोप पर किसी भी ईवेंट श्रोताओं को ट्रिगर करेगा जो उस स्कोप के बच्चे हैं जो $ ब्रॉडकास्ट कहलाते हैं।

$scope.$broadcast('my-event', { custom: 'data' });

$ प्रसारण के साथ शुरू होने वाली घटनाओं को रद्द नहीं किया जा सकता है।

$ गुंजाइश कार्यों का उपयोग करना

$ Rootcope में एक फ़ंक्शन की घोषणा करते समय इसके फायदे हैं, हम $ स्कोप फ़ंक्शन को उस कोड के किसी भी हिस्से को घोषित कर सकते हैं जिसे $ स्कोप सेवा द्वारा इंजेक्ट किया गया है। उदाहरण के लिए नियंत्रक।

नियंत्रक

myApp.controller('myController', ['$scope', function($scope){
    $scope.myFunction = function () {
        alert("You are in myFunction!");
    };
}]);

अब आप नियंत्रक से अपने फ़ंक्शन को कॉल कर सकते हैं:

$scope.myfunction();

या उस विशिष्ट नियंत्रक के तहत HTML के माध्यम से:

<div ng-controller="myController">
    <button ng-click="myFunction()"> Click me! </button>
</div>

आदेश

एक कोणीय निर्देश एक और जगह है जहाँ आप अपने दायरे का उपयोग कर सकते हैं:

myApp.directive('triggerFunction', function() {
    return {
        scope: {
            triggerFunction: '&'
        },
        link: function(scope, element) {
            element.bind('mouseover', function() {
                scope.triggerFunction();
            });
        }
    };
});

और एक ही नियंत्रक के तहत आपके HTML कोड में:

<div ng-controller="myController">
    <button trigger-function="myFunction()"> Hover over me! </button>
</div>

बेशक, आप एक ही चीज़ के लिए ngMouseover का उपयोग कर सकते हैं, लेकिन निर्देशों के बारे में क्या खास है कि आप उन्हें अपनी इच्छानुसार अनुकूलित कर सकते हैं। और अब आप जानते हैं कि अपने $ स्कोप फ़ंक्शंस का उपयोग उनके अंदर कैसे करें, रचनात्मक रहें!

आप एक निर्देश पर गुंजाइश कैसे सीमित कर सकते हैं और आप ऐसा क्यों करेंगे?

स्कोप का उपयोग "गोंद" के रूप में किया जाता है जिसका उपयोग हम अभिभावक नियंत्रक, निर्देश और निर्देश टेम्पलेट के बीच संवाद करने के लिए करते हैं। जब भी AngularJS एप्लिकेशन को बूटस्ट्रैप किया जाता है, एक rootScope ऑब्जेक्ट बनाया जाता है। नियंत्रकों, निर्देशों और सेवाओं द्वारा बनाए गए प्रत्येक क्षेत्र को मूल रूप से रूटस्कोप से विरासत में मिला है।

हां, हम एक निर्देश पर गुंजाइश को सीमित कर सकते हैं। हम निर्देशन के लिए एक अलग गुंजाइश बनाकर ऐसा कर सकते हैं।

3 प्रकार के निर्देशकीय दायरे हैं:

1. स्कोप: गलत (निर्देश अपने मूल दायरे का उपयोग करता है)
2. स्कोप: ट्रू (निर्देश को एक नया दायरा मिलता है)
3. स्कोप: {} (निर्देश को एक नया पृथक स्कोप मिला है)

नए पृथक दायरे के साथ निर्देश: जब हम एक नया पृथक दायरा बनाते हैं तो यह मूल क्षेत्र से विरासत में नहीं मिलेगा। इस नए स्कोप को आइसोलेटेड स्कोप कहा जाता है क्योंकि यह अपने पैरेंट स्कोप से पूरी तरह अलग हो जाता है। क्यों? क्या हमें अलग-अलग गुंजाइश का उपयोग करना चाहिए: जब हम एक कस्टम निर्देश बनाना चाहते हैं तो हमें अलग-अलग गुंजाइश का उपयोग करना चाहिए क्योंकि यह सुनिश्चित करेगा कि हमारा निर्देश सामान्य है, और एप्लिकेशन के अंदर कहीं भी रखा गया है। माता-पिता का दायरा निर्देशात्मक दायरे में हस्तक्षेप करने वाला नहीं है।

पृथक दायरे का उदाहरण:

var app = angular.module("test",[]);

app.controller("Ctrl1",function($scope){
    $scope.name = "Prateek";
    $scope.reverseName = function(){
        $scope.name = $scope.name.split('').reverse().join('');
    };
});
app.directive("myDirective", function(){
    return {
        restrict: "EA",
        scope: {},
        template: "<div>Your name is : {{name}}</div>"+
        "Change your name : <input type='text' ng-model='name'/>"
    };
});

वहाँ 3 प्रकार के उपसर्ग हैं AngularJS अलग-अलग गुंजाइश के लिए प्रदान करता है ये हैं:

1. "@" (टेक्स्ट बाइंडिंग / वन-वे बाइंडिंग)
2. "=" (डायरेक्ट मॉडल बाइंडिंग / टू-वे बाइंडिंग)
3. "और" (व्यवहार बंधन / विधि बंधन)

इन सभी उपसर्गों को निर्देश तत्व के गुणों से डेटा प्राप्त होता है जैसे:

<div my-directive 
  class="directive"
  name="{{name}}" 
  reverse="reverseName()" 
  color="color" >
</div>