मैं AngularJS में दो निर्देशों के बीच दायरा कैसे साझा करूं?

Question

मैं निम्नलिखित दो निर्देशों के बीच $scope साझा करना चाहते हैं:

One23SRCApp.directive('directive1',function() { 
    return { 
     restrict: "A", 
     scope:true, 
     link: function (scope, element, attrs) { 
      scope.tablename = "table"; 
     } 
    }; 
}); 


One23SRCApp.directive('directive2',function() { 
    return { 
     restrict: "A", 
      link: function (scope, element, attrs) { 
      var tablename = scope.tablename; 
     } 
    }; 
}) 

HTML में, मेरे पास है:

<input type="text" directive2 placeholder="Search Models..."> 

<table directive1> 
    <tr> 
    <td>column1</td> 
    <td>column1</td> 
    </tr> 
</table> 

मैं निर्देश अलग गुंजाइश के साथ "directive1" नाम, बताए बनाया है scope.tablename संपत्ति पर "टेबल" नाम दें। मैं अन्य दायरे में इस दायरे की संपत्ति तक पहुंच नहीं पा रहा हूं।

तो मैं दूसरे में एक निर्देश के दायरे को कैसे प्राप्त कर सकता हूं?

Answer 1

आप उन निर्देशों पर $rootScope.$broadcast कर सकते हैं जिन्हें आपको निर्देश में सिंक करने की आवश्यकता है।

या आप अपने निर्देश 1 अलग-अलग दायरे में ऑब्जेक्ट पास कर सकते हैं, जो संचार तंत्र के रूप में कार्य करेगा। इस ऑब्जेक्ट पर यदि आप tablename जैसी उप प्रॉपर्टी बदलते हैं, तो यह मूल दायरे में प्रभावित होगा।

कुछ

तरह

One23SRCApp.directive('directive1',function() { 
    return { 
     restrict: "A", 
     scope:{tableconfig:'='}, 
     link: function (scope, element, attrs) { 
      scope.tableconfig.tablename= "table"; 
     } 
    }; 
}); 


One23SRCApp.directive('directive2',function() { 
    return { 
     restrict: "A", 
      link: function (scope, element, attrs) { 
      var tablename = scope.tableconfig.tablename; 
     } 
    }; 
}) 

एचटीएमएल हो जाता है

<table directive1 tableconfig='tableconfig'> 
    <tr> 
    <td>column1</td> 
    <td>column1</td> 
    </tr> 
</table> 

आपका नियंत्रक इस वस्तु परिभाषित

$scope.tableconfig={};

Answer 2

होना चाहिए

मेरा सुझाव साझा संसाधन का उपयोग करना होगा, उदा। एक सेवा। सेवाएं सिंगलेट हैं, जिसका अर्थ है कि प्रत्येक सेवा का केवल एक ही उदाहरण है, इसलिए आप उन्हें निर्देश, नियंत्रक, स्कोप्स और यहां तक ​​कि रूटिंग के माध्यम से पृष्ठ बदलने के दौरान डेटा साझा करने के लिए उपयोग कर सकते हैं।

आप इस तरह संसाधन सेवा निर्धारित करना होगा:

app.factory("MyResource",function(){ 
    return {}; 
}); 

तब आप अपने निर्देशों में है कि सेवा इंजेक्षन सकता है (और नियंत्रकों यदि आवश्यकता हुई) और इस तरह इसका इस्तेमाल।

One23SRCApp.directive('directive1', ['MyResource', function(MyResource) { 
    return { 
     restrict: "A", 
     scope:true, 
     link: function (scope, element, attrs) { 
      var resource = MyResource; 
      resource.name = 'Foo'; 
     } 
    }; 
}); 
One23SRCApp.directive('directive2', ['MyResource', function(MyResource) { 
    return { 
     restrict: "A", 
     link: function (scope, element, attrs) { 
      var resource = MyResource; 
      console.log(resource.name); 
     } 
    }; 
}); 

Directive2 'फू' लॉग इन करने के बाद से संसाधन साझा किया जाता है जाएगा। हालांकि सुनिश्चित करें कि आपके निर्देश सही क्रम में चल रहे हैं!

**

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

संपादित करें: जबकि ऊपर बहुत उपयोगी है जब नियंत्रक और मार्गों के बीच जानकारी साझा, stevuu जवाब की जाँच करें। यह निर्देशों के लिए बेहतर लगता है (हालांकि मैंने कोशिश नहीं की है)।

Answer 3

एंगुलरजेएस निर्देशक नियंत्रकों का समर्थन करता है, जो नियंत्रक हैं जो एक ही नियंत्रक की आवश्यकता वाले कई निर्देशों के बीच साझा किए जाते हैं।यह आपको किसी भी निर्देश में tableConfig तक पहुंचने और संशोधित करने की अनुमति देता है जिसके लिए नियंत्रक की आवश्यकता होती है, बिना किसी अलग सेवा या ईवेंट की घोषणा किए। अधिक जानकारी के लिए, directives documentation में "संचार करने वाले निर्देश बनाना" देखें।

उदाहरण के लिए ngModel और ngForm काम है।

Answer 4

चंदर्मनी का नमूना काम कर रहा है। हालांकि इस तरह आपको अभी भी अपने निर्देश पर विशेषता असाइन करना है और यह अब अलग नहीं है। यह दायरे पर प्रदूषण है ...

मेरी सलाह है कि नियंत्रक का उपयोग करके इस तरह से गुजरने के द्वारा मेरा अलग-अलग दायरा साझा करना है। आपका घर, आपका कोड! कोड से पहले सोचें लेकिन सबसे अधिक ... आनंद लें!

One23SRCApp.directive('directive1',function() { 
    return { 
     restrict: "A", 
     scope: true, 
     controller : function($scope){ 
       $scope.tableconfig= {}; 
       this.config = function(){ 
        return $scope.tableconfig; 
       } 
     }, 
     link: function (scope, element, attrs) { 
      scope.tableconfig.tablename= "table"; 
     } 
    } 
}); 


One23SRCApp.directive('directive2',function() { 
    return { 
      restrict: "A", 
      //^ -- Look for the controller on parent elements, not just on the local scope 
      //? -- Don't raise an error if the controller isn't found 
      require: "^directive1", 
      link: function (scope, element, attrs) { 
       var tablename = scope.config().tablename; 
      } 
    } 
}); 

प्रयोग

<!-- Notice, no need to share a scope as attribute --> 
<div directive1> 
    <div directive2> 
    </div> 
</div>