कस्टम AngularJS निर्देशों के लिए 'बदलें' सुविधा का उपयोग कैसे करें?

Question

नीचे दिए गए कोड में कोई प्रभाव क्यों replace=trueया replace=falseनहीं है?

जब रिप्लेस = असत्य होने पर "कुछ मौजूदा सामग्री" क्यों प्रदर्शित नहीं की जा रही है?

या इसे अधिक विनम्रतापूर्वक डालते हुए, क्या आप कृपया बता सकते हैं कि replace=true/falseनिर्देशों में क्या विशेषता है और इसका उपयोग कैसे किया जाए?

उदाहरण

जे एस / कोणीय:

<script>
    angular.module('scopes', [])
          .controller('Ctrl', function($scope) {
                $scope.title = "hello";

          })
          .directive('myDir', function() {
            return {
              restrict: 'E',
              replace: true,
              template: '<div>{{title}}</div>'
            };
      });
</script>

HTML:

<div ng-controller="Ctrl">
    <my-dir><h3>some existing content</h3></my-dir>
</div>

इसे यहां प्लंकेर में देखें:

http://plnkr.co/edit/4ywZGwfsKHLAoGL38vvW?p=preview

Comments

@georgeawg ने इसे एक अन्य प्रश्न के डुप्लिकेट के रूप में चिह्नित किया, जिसे इस प्रश्न से बाद की तारीख में पूछा / उत्तर दिया गया था।

— काया टोस्ट

Answer 1

जब आपके पास replace: trueडोम का निम्नलिखित टुकड़ा हो:

<div ng-controller="Ctrl" class="ng-scope">
    <div class="ng-binding">hello</div>
</div>

जबकि, replace: falseआपको यह मिलता है:

<div ng-controller="Ctrl" class="ng-scope">
    <my-dir>
        <div class="ng-binding">hello</div>
    </my-dir>
</div>

इसलिए replaceनिर्देशों में संपत्ति यह बताती है कि क्या जिस तत्व को निर्देश लागू किया जा रहा है ( <my-dir>उस स्थिति में) रहना चाहिए ( replace: false) और निर्देश के टेम्पलेट को उसके बच्चे के रूप में संलग्न किया जाना चाहिए ,

या

तत्व है जो करने के लिए निर्देश लागू की जा रही किया जाना चाहिए की जगह ( replace: true) के निर्देश के टेम्पलेट द्वारा।

दोनों ही मामलों में तत्व (जिससे निर्देश लागू किया जा रहा है) बच्चों को खो दिया जाएगा। यदि आप तत्व की मूल सामग्री / बच्चों को बचाना चाहते हैं, तो आपको इसे स्थानांतरित करना होगा। निम्नलिखित निर्देश यह करेंगे:

.directive('myDir', function() {
    return {
        restrict: 'E',
        replace: false,
        transclude: true,
        template: '<div>{{title}}<div ng-transclude></div></div>'
    };
});

उस स्थिति में यदि निर्देश के टेम्पलेट में आपके पास एक तत्व (या तत्व) विशेषता के साथ है ng-transclude, तो इसकी सामग्री को तत्व के द्वारा प्रतिस्थापित किया जाएगा (जिस पर निर्देश लागू किया जा रहा है) मूल सामग्री।

अनुवाद का उदाहरण देखें http://plnkr.co/edit/2DJQydBjgwj9vExLn3Ik?p=preview

अनुवाद के बारे में अधिक पढ़ने के लिए इसे देखें ।

Comments

यह एक आश्चर्यजनक सरल व्याख्या है। और पारगमन को भी स्पष्ट करने के लिए एक गुच्छा धन्यवाद।

— काया टोस्ट

इससे भी महत्वपूर्ण बात यह है कि इसे docs.angularjs.org/guide/directive पर क्यों नहीं समझाया गया है और यह उत्तर इस विषय पर निश्चित उत्तर के लिए लिंक क्यों नहीं करता है?

— त्रिंदाज़

@Trindaz replaceको AngularJS v1.3 ( लिंक ) के बाद से हटा दिया गया है ।

— टोनसी डी।

Answer 2

replace:true पदावनत किया गया है

डॉक्स से:

replace ([विकृत!], अगले प्रमुख रिलीज में हटा दिया जाएगा - यानी v2.0)

निर्दिष्ट करें कि टेम्पलेट को क्या बदलना चाहिए। के लिए चूक false।

• true - टेम्प्लेट निर्देश के तत्व को प्रतिस्थापित करेगा।
• false - टेम्पलेट निर्देश के तत्व की सामग्री को बदल देगा।

- एंगुलरजेएस व्यापक निर्देश एपीआई

गिटहब से:

Caitp-- यह जाना जाता है क्योंकि वहाँ जाना जाता है, बहुत मूर्खतापूर्ण समस्याओं के साथ replace: true, जिनमें से कई वास्तव में एक उचित फैशन में तय नहीं किया जा सकता है। यदि आप सावधान हैं और इन समस्याओं से बचते हैं, तो आपके लिए और अधिक शक्ति है, लेकिन नए उपयोगकर्ताओं के लाभ के लिए, उन्हें सिर्फ यह बताना आसान है "इससे आपको सिरदर्द होगा, यह मत करो"।

- एंगुलरजेएस अंक # 7636

---

अपडेट करें

नोट: replace: trueपदावनत और उपयोग करने के लिए अनुशंसित नहीं है, मुख्य रूप से यहां सूचीबद्ध मुद्दों के कारण। नए एंगुलर में इसे पूरी तरह से हटा दिया गया है।

जगह के साथ मुद्दे: सच है

• गुण मान विलय नहीं हुए हैं
• संकलन से पहले निर्देश काटे नहीं जाते हैं
• transclude: element बदलें टेम्पलेट रूट में अप्रत्याशित प्रभाव हो सकते हैं

अधिक जानकारी के लिए देखें

• AngularJS $ संकलन सेवा एपीआई संदर्भ - के साथ मुद्दे replace:true

Comments

मैं पढ़ता हूं कि यह कोणीय 2 में अनौपचारिक रूप से समर्थित माना जाता है, लेकिन मैं यह पता नहीं लगा सकता कि इसे कैसे सक्रिय किया जाए। क्या कोई मुझे बता सकता है कि वाक्यविन्यास क्या है?

— devios1

@devios मैं अपने एमडीएल घटकों के लिए इस तरह के बात की जरूरत है, लेकिन वर्तमान में उपयोग कर remove-hostवैकल्पिक हल stackoverflow.com/questions/34280475/... यदि आप पता लगाना के बारे में सक्रिय करने replace: trueए 2 में हमें पता है।

— कुंसविक.देव १५'१६ को ५:३०