निर्देशात्मक परिभाषा के `प्रतिस्थापित` का उपयोग कैसे करें?


81

इस दस्तावेज़ में: http://docs.angularjs.org/guide/directive , यह कहता है कि replaceनिर्देशों के लिए एक कॉन्फ़िगरेशन है:

टेम्पलेट - HTML की सामग्री के साथ वर्तमान तत्व को बदलें। प्रतिस्थापन प्रक्रिया पुराने तत्व से नए तक सभी विशेषताओं / वर्गों को स्थानांतरित करती है। अधिक जानकारी के लिए नीचे घटक बनाना अनुभाग देखें।

जावास्क्रिप्ट कोड

app.directive('myd1', function(){
  return {
    template: '<span>directive template1</span>',
    replace: true
  }
});

app.directive('myd2', function(){
  return {
    template: '<span>directive template2</span>',
    replace: false
  }
});

HTML कोड

<div myd1>
  original content should be replaced
</div>
<div myd2>
  original content should NOT be replaced
</div>

लेकिन अंतिम पृष्ठ इस तरह दिख रहा है:

directive template1
directive template2

लगता replaceहै यह काम नहीं कर रहा है। क्या मुझे कुछ याद है?

लाइव डेमो: http://plnkr.co/edit/rGIgmjO81X2UxJohL4HM?p=preview

जवाबों:


175

आप भ्रमित हो रहे हैं transclude: true , जो आंतरिक सामग्री को जोड़ देगा।

replace: true इसका मतलब यह है कि निर्देश टेम्पलेट की सामग्री उस तत्व को प्रतिस्थापित करेगी, जिस पर निर्देश घोषित किया गया है, इस स्थिति में <div myd1> टैग।

http://plnkr.co/edit/k9qSx15fhSZRMwgAIMP4?p=preview

बिना उदाहरण के replace:true

<div myd1><span class="replaced" myd1="">directive template1</span></div>

और के साथ replace:true

<span class="replaced" myd1="">directive template1</span>

जैसा कि आप बाद के उदाहरण में देख सकते हैं, div टैग वास्तव में प्रतिस्थापित है


Transclude के बारे में क्या: 'तत्व'। यह वही काम करता है जो प्रतिस्थापित करता है: एनजी-ट्रांसक्लूड का उपयोग करते समय 'सच'।
CMCDragonkai

प्रतिस्थापित किया गया है: असत्य है, उसी का उपयोग नहीं कर रहा है?
नील

1
@ नील हां। इसे छोड़ना वैसा ही हैfalse
1933 की बारात

10
replaceअब पदावनत किया गया है
राबर्ट

2
@ रोबर्ट 'रिप्लेस' का रिप्लेसमेंट होगा या यह अच्छे के लिए चला गया है?
सिरोव्लादिमीर

12

जैसा कि प्रलेखन कहता है, 'प्रतिस्थापित' यह निर्धारित करता है कि क्या वर्तमान तत्व को निर्देश द्वारा प्रतिस्थापित किया गया है। दूसरा विकल्प यह है कि क्या यह मूल रूप से एक बच्चे के रूप में जोड़ा जाता है। यदि आप अपने plnkr के स्रोत को देखते हैं, तो ध्यान दें कि दूसरे निर्देश के लिए जहां प्रतिस्थापित गलत है कि div टैग अभी भी है। पहले निर्देश के लिए यह नहीं है।

पहला परिणाम:

<span myd1="">directive template1</span>

दूसरा परिणाम:

<div myd2=""><span>directive template2</span></div>

5

बदलें [सच | गलत (डिफ़ॉल्ट)]

प्रभाव

1.  Replace the directive element. 

निर्भरता:

1. When replace: true, the template or templateUrl must be required. 

0

अगर मुझे वास्तविक रूट एलिमेंट के साथ टेम्प्लेट के tn टॉप लेवल में कमेंट्री आती है तो भी मुझे यह त्रुटि मिली।

<!-- Just a commented out stuff -->
<div>test of {{value}}</div>
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.