निर्देशों के भीतर नेस्टिंग निर्देश

Question

एंगुलरजेएस निर्देशों के बारे में मैं एक ऐसी स्थिति में भाग गया जहां मैं एक और निर्देश के भीतर से एक निर्देश बुला रहा हूं और मेरे पास निम्नलिखित प्रश्न हैं।

1. मैं अपने लिंक फ़ंक्शन में scope.bindValue क्यों नहीं रेफर कर सकता हूं? क्या कोई तरीका है कि मैं scope.bindValue से एक मान की गणना कर सकता हूं और इसे दायरे में सेट कर सकता हूं?
2. उपनिर्देशिका दायरे में "@" का उपयोग क्यों कर सकती है: {} लेकिन लिंक फ़ंक्शन में scope.value = attrs.value का उपयोग नहीं करें?

के नीचे देखा जा सकता है सभी http://jsfiddle.net/sdg9/AjDtt/13/

एचटीएमएल में:

<directive bind-value="12" value="7"></directive> 

जे एस:

var myApp = angular.module('myApp', []); 
var commonTemplate = '<div>{{name}} bind-value is: {{bindValue}} </div><div>{{name}} value is: {{value}} </div><div>{{name}} add one to bind-value is: {{addOneBindValue}} </div><div>{{name}} add one to value is: {{addOneValue}} </div><br/>'; 

myApp.directive('directive', function() { 
    return { 
     scope: { 
      bindValue: "@", 
     }, 
     template: commonTemplate + '<br/><sub-directive bind-value="{{value}}" value="{{value}}"></sub-directive>', 
     restrict: 'E', 
     link: function (scope, element, attrs) { 
      scope.name = "Directive"; 
      scope.value = attrs.value; 
      scope.addOneBindValue = parseInt(scope.bindValue) + 1; 
      scope.addOneValue = parseInt(scope.value) + 1; 
     } 
    }; 
}); 


myApp.directive('subDirective', function() { 
    return { 
     scope: { 
      bindValue: "@" 
     }, 
     template: commonTemplate, 
     restrict: 'E', 
     link: function (scope, element, attrs) { 
      scope.name = "SubDirective"; 
      scope.value = attrs.value; 
      scope.addOneBindValue = parseInt(scope.bindValue) + 1; 
      scope.addOneValue = parseInt(scope.value) + 1; 
     } 
    }; 
}); 

आउटपुट:

Directive bind-value is: 12 
Directive value is: 7 
Directive add one to bind-value is: null <--- why? 
Directive add one to value is: 8  

SubDirective bind-value is: 7 
SubDirective value is:      <--- why? 
SubDirective add one to bind-value is: null 
SubDirective add one to value is: null 

Answer 1

इंटरपोलेटेड विशेषताओं (यानी, विशेषताएँ जो {{}} एस का उपयोग करती हैं) और '@' के साथ परिभाषित स्कोप गुण अलग-अलग होते हैं जब लिंक फ़ंक्शन चलता है। मान (असीमित रूप से) प्राप्त करने के लिए आपको attrs.$observe() (या scope.$watch(@ property here, ...)) का उपयोग करने की आवश्यकता है।

तो, scope.bindValue उपलब्ध नहीं है जब आप इसका उपयोग करने का प्रयास कर रहे हैं।

इसी तरह, आपके उपनिर्देशक में, विशेषता value में {{}} है, इसलिए इसका उपयोग तब भी उपलब्ध नहीं होगा जब आप इसका उपयोग करने का प्रयास कर रहे हों। इसके लिए आपको '@' निर्देशक संपत्ति को भी परिभाषित करने की आवश्यकता है।

कार्य fiddle।

एसिंक्रोनस आवश्यकता का कारण यह है कि {{}} के अंदर की वस्तुएं बदल सकती हैं, और आप आमतौर पर अपना निर्देश नोटिस करना चाहते हैं (और फिर कुछ करें - जैसे "addOne" मान अपडेट करें)। '@' आमतौर पर अलग-अलग क्षेत्रों के साथ प्रयोग किया जाता है जब विशेषता मान में {{}} s होता है।

यदि विशेषता मान स्थिरांक हैं, और आप टेम्पलेट (या टेम्पलेट यूआरएल) में मानों का उपयोग नहीं करेंगे, तो शायद '@' का उपयोग नहीं किया जाना चाहिए। लिंक फ़ंक्शन में, यदि मान एक स्ट्रिंग है, या scope.$eval(attrs.attrName) यदि विशेषता एक संख्या या बूलियन (या parseInt(attrs.attrName) है तो पता है कि यह एक संख्या है) तो attrs.attrName का उपयोग करें।