Angular.js: कोणीय 1.2.18: ट्रांसक्लूड के साथ एनजी-रिपीट समस्या

को निर्मित 17 जून 2014 · 48टिप्पणियाँ · स्रोत: angular/angular.js

जब एनजी-ट्रांसक्लूड द्वारा एक निर्देश पास किया जाता है, तो संदर्भ के साथ एचटीएमएल सामग्री {{आइटम}} जिसे आप दोहराना चाहते हैं (निर्देश में लागू एनजी-रिपीट = "आइटम इन कलेक्शन" के माध्यम से) संस्करण 1.2.18 के साथ काम नहीं करता है

http://embed.plnkr.co/EvzF25sPD3uZLQivDFqy/preview

स्रोत

sergicontre

सबसे उपयोगी टिप्पणी

मैं जो कर रहा था वह सिर्फ $parent का उपयोग कर रहा था। यह बहुत सी चीजें जोड़ने के बिना वेनिला की कोठरी है।

तो मेरे पास कुछ ऐसा है:

angular.module('test').directive('myDirectiveWithTransclusion', function() {
     return {
          restrict: 'E'
          transclude: {
               transcludeThis: 'transcludeThis'
          }
          template: "<div ng-repeat='item in array'><div ng-transclude='transcludeThis'></div></div>"
     }
})

<my-directive-with-transclusion>
     <transclude-this>
          {{$parent.item}}
     </transclude-this>
</my-directive-with-transclusion>

moneytree-doug 4 मई 2016

👍13 ❤8 🎉2

सभी 48 टिप्पणियाँ

ओह लॉडी। @petebacondarwin इनमें से एक और करना चाहते हैं? यह वास्तव में "एनजी-ट्रांसक्लूड के साथ एक भाई का दायरा न बनाएं" चीज फिर से है, यह सिर्फ इतना है कि इस मामले में टूटने के कारण पहले काम किया

caitp 17 जून 2014

(शायद) संबंधित: https://github.com/angular/angular.js/issues/7842

Narretz 17 जून 2014

अफसोस की बात है कि ng-transclude ट्रांसक्लूजन इस तरह से काम नहीं करता है। आप जो करने की कोशिश कर रहे हैं वह एक कंटेनर निर्देश बना रहा है जो अपने बच्चों को "टेम्पलेट" के रूप में उपयोग करता है कि आपके अपने निर्देश के अंदर क्या मुहर लगाना है।

मैं अतीत में कुछ बार इसमें भाग गया था और इसके बारे में मिस्को के साथ लंबी बहस हुई थी। ट्रांसक्लूड की गई सामग्री परिभाषा के अनुसार उस स्थान के दायरे से जुड़ी होती है जहां निर्देश तत्काल होता है; निर्देश के खाके के दायरे में नहीं।

पहले यह काम कर सकता था क्योंकि हम वास्तव में कुछ मामलों में गलत दायरे में ट्रांसक्लूजन को बाध्य कर रहे थे जिसमें नेस्टेड ट्रांसक्लूजन परिदृश्य शामिल थे।

तो वास्तव में आपको वास्तव में यहां ट्रांसक्लूजन का उपयोग करने की आवश्यकता नहीं है क्योंकि आप वास्तव में जो करने की कोशिश कर रहे हैं वह केवल आंतरिक HTML को अपने स्वयं के टेम्पलेट में इंजेक्ट करना है। आप इसे कंपाइल फंक्शन में इस तरह कर सकते हैं:

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

app.directive('test', function(){

  return {
    restrict: 'E',
    compile: function compile(tElement, tAttrs, tTransclude) {

      // Extract the children from this instance of the directive
      var children = tElement.children();

      // Wrap the chidren in our template
      var template = angular.element('<div ng-repeat="item in collection"></div>');
      template.append(children);

      // Append this new template to our compile element
      tElement.html('');
      tElement.append(template);

      return {
        pre: function preLink(scope, iElement, iAttrs, crtl, transclude) {
            scope.collection = [1, 2, 3, 4, 5];
        },
        post: function postLink(scope, iElement, iAttrs, controller) {
          console.log(iElement[0]);
        }
      };
    }
  };
});

petebacondarwin 18 जून 2014

👍1

इसका एक और उदाहरण (मुझे विश्वास है):

इंडेक्स.एचटीएमएल:

<html ng-app='myApp'>

<head>
    <title>AngularJS Scopes</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
    <script src='index.js'></script>
</head>

<body ng-controller='myController'>
    <people>Hello {{person.name}}</people>
</body>
</html>

index.js:

var myApp = angular.module( 'myApp', [] );

myApp.controller( 'myController', function( $scope ) {
    $scope.people = [
        { name: 'Rob'  },
        { name: 'Alex' },
        { name: 'John' }
    ];
});

myApp.directive( 'people', function() {
    return {
        restrict: 'E',

        transclude: true,
        template: '<div ng-repeat="person in people" ng-transclude></div>',
    }
});

कोणीय 1.2.1 के साथ काम किया, लेकिन 1.2.18 के साथ नहीं;

निर्दोष डेवलपर केवल ऊपर दिए गए कोड के काम करने की उम्मीद कर सकता है। यह दस्तावेज़ कहता है:

... कभी-कभी यह वांछनीय होता है कि किसी स्ट्रिंग या ऑब्जेक्ट के बजाय पूरे टेम्पलेट में पास होने में सक्षम होना चाहिए। मान लीजिए कि हम एक "संवाद बॉक्स" घटक बनाना चाहते हैं। संवाद बॉक्स किसी भी मनमानी सामग्री को लपेटने में सक्षम होना चाहिए।

जबकि ngTransclude प्रलेखन कहता है:

वह निर्देश जो ट्रांसक्लूजन का उपयोग करने वाले निकटतम पैरेंट डायरेक्टिव के ट्रांसक्लूड DOM के इंसर्शन पॉइंट को मार्क करता है। तत्व की कोई भी मौजूदा सामग्री, जिस पर यह निर्देश रखा गया है, स्थानांतरित की गई सामग्री को सम्मिलित करने से पहले हटा दी जाएगी।

यह @petebacondarwin परिभाषा से

...एक कंटेनर निर्देश बनाएं जो अपने बच्चों का उपयोग "टेम्पलेट" के रूप में करता है कि आपके निर्देश के अंदर क्या मुहर लगाना है

मैं वास्तव में समझ नहीं पा रहा हूं कि ट्रांसक्लूजन यहां सही समाधान क्यों नहीं है। अगर कुछ भी हो तो मैं उचित समाधान की अपेक्षा करता हूं जिसमें टेम्पलेट स्कोप को ट्रांसक्लूजन फ़ंक्शन में इंजेक्ट करना शामिल है।

Izhaki 1 जुल॰ 2014

अंतर यह है कि स्थानांतरित की गई सामग्री "बाहर" से जुड़ी होती है, अर्थात उस स्थान का दायरा जहां <people> तत्व पाया जाता है।
जबकि आप जो चाहते हैं वह इनलाइन टेम्पलेट के लिए "अंदर", यानी निर्देश के दायरे से बंधे होने के लिए है।
यदि आपका निर्देश अपना दायरा नहीं बनाता है, तो यह लगभग वही बात है। यदि आपका निर्देश एक अलग दायरा बनाता है, तो कहें, यह निश्चित रूप से वही बात नहीं है। आंतरिक दायरे की बाहरी दायरे तक पहुंच नहीं है।

petebacondarwin 1 जुल॰ 2014

मुझे लगता है कि आप अपना खुद का निर्देश बना सकते हैं जो वास्तव में टेम्पलेट स्कोप को ट्रांसक्लूजन फ़ंक्शन में इंजेक्ट करता है ...

petebacondarwin 1 जुल॰ 2014

देखें http://plnkr.co/edit/IbNqR0854V8yXnajKSFB?p=preview

petebacondarwin 1 जुल॰ 2014

आप जो कह रहे हैं वह सही समझ में आता है - लेकिन यह तभी है जब आप कोणीय की गहराई को समझते हैं। मेरा कहना है कि ऊपर दिया गया उदाहरण किसी भी तरह बिना अतिरिक्त काम के काम करना चाहिए।

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

इसी मुद्दे को इस ब्लॉग में समझाया गया है। मेरा मानना है कि अधिक से अधिक लोग शिकायत करेंगे कि इस समय चीजें कैसी हैं (इस व्यवहार के परिणामस्वरूप जीथब पर पहले से ही संबंधित मुद्दों की भीड़ है)।

Izhaki 1 जुल॰ 2014

और कोड के लिए बहुत बहुत धन्यवाद। मैं इसे दूसरों के लाभ के लिए यहां दोहरा रहा हूं:

var myApp = angular.module( 'myApp', [] );

myApp.controller( 'myController', function( $scope ) {
    $scope.people = [
        { name: 'Rob'  },
        { name: 'Alex' },
        { name: 'John' }
    ];
});

myApp.directive( 'people', function() {
    return {
        restrict: 'E',
        transclude: true,
        template: '<div ng-repeat="person in people" inject></div>'
    }
});

myApp.directive('inject', function(){
  return {
    link: function($scope, $element, $attrs, controller, $transclude) {
      if (!$transclude) {
        throw minErr('ngTransclude')('orphan',
         'Illegal use of ngTransclude directive in the template! ' +
         'No parent directive that requires a transclusion found. ' +
         'Element: {0}',
         startingTag($element));
      }
      var innerScope = $scope.$new();
      $transclude(innerScope, function(clone) {
        $element.empty();
        $element.append(clone);
        $element.on('$destroy', function() {
          innerScope.$destroy();
        });
      });
    }
  };
});

Izhaki 1 जुल॰ 2014

👍9 ❤3

:-) मैं मानता हूं कि बहुत अधिक सिर खुजलाने और कीबोर्ड को पीटने के बिना ट्रांसक्लूजन को समझना आसान विषय नहीं है।
शायद हमें इस तथ्य के आसपास दस्तावेज़ीकरण को और भी स्पष्ट करने की आवश्यकता है कि एनजी-ट्रांसक्लूड ट्रांसक्लूड की गई सामग्री को "बाहरी" दायरे में बांध देगा?

petebacondarwin 1 जुल॰ 2014

व्यक्तिगत रूप से, मुझे लगता है कि वर्तमान दस्तावेज, कम से कम इस महत्वपूर्ण पृष्ठ पर , काफी स्पष्ट और स्पष्ट है:

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

(और आगे जो कुछ भी होता है वह इसे आगे दिखाता है)।

मैं शायद आपके द्वारा प्रदान किए गए निर्देश को ढांचे में जोड़ने पर विचार करूंगा, संभवतः इसे 'एनजी-ट्रांसक्लूड-आंतरिक' ब्रांडिंग कर सकता हूं? मैं कम से कम एक और व्यक्ति के बारे में जानता हूं, जिसे 'ट्रांसस्कोप' नामक निर्देश के साथ इस पर जाना था।

Izhaki 1 जुल॰ 2014

मैंने समाधान की कोशिश की है, लेकिन मुझे दूसरी समस्या का सामना करना पड़ा, क्यों एनजी-रिपीट पैरेंट स्कोप में निर्देश का दायरा नहीं है

http://plnkr.co/edit/7j92IC?p=preview

luboid 1 जुल॰ 2014

@luboid कारण जो आपके प्लंकर में काम नहीं करता है, क्योंकि आपके निर्देश में एक अलग दायरा है, और संशोधित संकलित डोम (ऐसा मत करो, वैसे, यह इस समस्या को हल करने का एक मूर्खतापूर्ण तरीका है) एक का उपयोग करेगा आइसोलेट स्कोप के माता-पिता की सहोदर।

मैं उस काम को करने के लिए उचित तरीके का एक उदाहरण जोड़ूंगा, जिसकी आप अपेक्षा करते हैं। (लेकिन, यह अभी भी सामान्य रूप से एक बहुत ही भयानक डिज़ाइन है, ऐसा करने का कोई अच्छा कारण नहीं है)

caitp 1 जुल॰ 2014

वास्तव में, इसके बारे में सोचें, एनजी-रिपीट या अन्य तत्व ट्रांसक्लूजन निर्देशों के साथ आप वास्तव में इसे ठीक नहीं कर सकते। तो हाँ, यह संस्करण 1.2.0 . के बाद से काम नहीं करेगा

caitp 1 जुल॰ 2014

@petebacondarwin यहाँ वास्तव में नौसिखिया प्रश्न है। केवल के बजाय var innerScope उपयोग क्यों करें:

myApp.directive( 'inject', function() {
    return {
        link: function( $scope, $element, $attrs, controller, $transclude ) {
            if ( !$transclude ) {
                throw minErr( 'ngTransclude' )( 'orphan',
                    'Illegal use of ngTransclude directive in the template! ' +
                    'No parent directive that requires a transclusion found. ' +
                    'Element: {0}',
                    startingTag( $element ));
            }

            $transclude( $scope, function( clone ) {
                $element.empty();
                $element.append( clone );
            });
        }
    };
});

Izhaki 1 जुल॰ 2014

यदि आप कुछ नए तत्वों को संकलित करने जा रहे हैं, तो आम तौर पर एक नया दायरा बनाना सबसे अच्छा होता है, क्योंकि आप सुनिश्चित नहीं हैं कि मूल निर्देश कुछ जटिल निर्देश से टकराया गया है जो गुंजाइश बनाना चाहता है, आदि। लेकिन आप प्राप्त करने में सक्षम हो सकते हैं इसके साथ यहाँ दूर ...

petebacondarwin 1 जुल॰ 2014

मदद के लिए धन्यवाद,
मैं बाहरी टेम्प्लेट ($templateCache) का उपयोग करूंगा, फिर चीजें थोड़ी सरल हो रही हैं, बेस टेम्प्लेट को डायरेक्टिव स्कोप के साथ संकलित किया गया है

luboid 1 जुल॰ 2014

@Izhaki @petebacondarwin इसके लिए बहुत बहुत धन्यवाद जिसमें निर्देश शामिल हैं। अंत में 1.2.16 से 1.2.20 तक अपडेट किया गया और यह देखने में थोड़ा समय लगा कि मेरा ऐप इतनी मेहनत से क्यों टूटने लगा।

मैंने सोचा था कि इस सूत्र को खोजने से पहले ट्रांसक्लूजन एक बहुत ही सरल अवधारणा थी। नहीं।

kencaron 14 जुल॰ 2014

उन सभी को धन्यवाद जो इसे साफ़ करने में मदद कर रहे हैं। यहां वर्णित मुद्दों के कारण 1.2.21 में अपडेट करने से हमारा अधिकांश इंटरफ़ेस टूट गया, और अब हम सही रास्ते पर हैं।

@caitp @petebacondarwin : अगर हमें दो अतिरिक्त जानकारी मिल जाए तो यह बहुत मददगार होगा:

"संस्करण 1.2.0 के बारे में" (जैसा कि कैटलिन ने कहा) कहीं न कहीं हुआ कौन सा ब्रेकिंग परिवर्तन इस दृष्टिकोण के परिणामस्वरूप अचानक विस्फोट हो गया? मैं समझता हूं कि अब क्या काम नहीं करता है, लेकिन मुझे उस रिलीज के पास चेंजलॉग में कोई विशेष चीज नहीं दिख रही है जो इस विशेष मुद्दे से संबंधित है।
यदि हम पृथक, पुन: प्रयोज्य कंटेनर चाहते हैं, जिससे मनमानी आंतरिक सामग्री विरासत में मिल सकती है, तो एनजी-ट्रांसक्लूड के बदले एंड-यूजर्स को वैकल्पिक दृष्टिकोण क्या होना चाहिए? उदाहरण: एक बड़ा, बहु-किरायेदार एप्लिकेशन जहां इंटरफ़ेस भी परिवर्तनशील है और पूरी तरह से डेटा-चालित है। इसलिए, हमारे पास सूची नियंत्रण जैसी चीजें हैं जिन्हें स्वयं को पॉप्युलेट करने के लिए डेटा पुनर्प्राप्त करने की आवश्यकता है, फिर लगातार बातचीत/व्यवहार करें। हम उन चीजों को प्रदान करने वाले रैपर निर्देश को मानकीकृत करने में सक्षम होना चाहते हैं। लेकिन सूची आइटम (जिसमें आंतरिक निर्देश हो सकते हैं) के लिए हम जिन टेम्प्लेट का उपयोग करते हैं, वे स्थिति के आधार पर भिन्न होते हैं। और सूचियों को अक्सर नेस्ट किया जाता है, पुनरावर्ती रूप से, डेटा के वृक्ष-संरचना के आधार पर जो उन्हें उत्पन्न करता है। इसलिए, हमें उन नेस्टेड सूचियों के लिए अलगाव की आवश्यकता है। हम सभी कोड को नियंत्रित करते हैं, इसलिए हम आंतरिक को बाहरी से अलग करने के लिए ट्रांसक्लूजन का उपयोग नहीं कर रहे हैं। इसके बजाय, हम कंटेनर और उनकी मनमानी सामग्री के लिए एक अच्छा, घोषणात्मक दृष्टिकोण के बाद हैं, जैसा कि निर्देश मार्गदर्शिका में स्पष्ट रूप से अनुशंसित है। क्या एनजी-इनक्लूड अब इसके लिए बेहतर विकल्प है (कंटेनर घोषणा पर एक विशेषता के रूप में आंतरिक टेम्पलेट के लिए पथ पारित करना), भले ही यह हमें इनलाइन टेम्पलेट्स से दूर कर देता है, और इस प्रकार थोड़ा कम मुहावरेदार लगता है?

xml 4 अग॰ 2014

मैं समझता हूं कि अब क्या काम नहीं करता है, लेकिन मुझे उस रिलीज के पास चेंजलॉग में कोई विशेष चीज नहीं दिख रही है जो इस विशेष मुद्दे से संबंधित है।

https://github.com/angular/angular.js/blob/master/CHANGELOG.md#120 -timely-delivery-2013-11-08

मैं इनका विशेष रूप से जिक्र कर रहा था

केवल उन बच्चों के लिए आइसोलेट स्कोप पास करें जो आइसोलेट निर्देश से संबंधित हैं (d0efd5ee)
आइसोलेट स्कोप को सही मायने में आइसोलेट करें (909कैबडी3, #1924, #2500)

लेकिन, मैं वास्तव में याद नहीं कर सकता कि मैं अब किस बारे में बात कर रहा था, कौन जानता है ل͜ຈ༽ﾉ

caitp 4 अग॰ 2014

चैंज में केवल दो प्रकार के संदेश होते हैं: परिवर्तन और परिवर्तन को तोड़ना। इसे एक ब्रेकिंग परिवर्तन नहीं माना जाता था, बल्कि एक बगफिक्स माना जाता था। यह भविष्यवाणी करना मुश्किल था कि कई लोगों ने इस व्यवहार का इस्तेमाल किया। लेकिन इसे शायद माइग्रेशन दस्तावेज़ों में जाना चाहिए (जिसे कुछ प्यार चाहिए)

Narretz 4 अग॰ 2014

थानेदार '' नफ़। वही हैं। मैं ट्रांसक्लूजन से संबंधित बदलावों की तलाश कर रहा था, लेकिन यह स्पष्ट रूप से आइसोलेट स्कोप में बदलाव है जो ट्रांसक्लूजन के लिए आकस्मिक है। धन्यवाद!

xml 4 अग॰ 2014

इस परिवर्तन ने हमारे कोड को भी तोड़ दिया। उन निर्देशों के person चरों तक पहुँचने और मूल दायरे में उनका उपयोग करने का कुछ आसान घोषणात्मक तरीका होना अच्छा होगा। 1.2.18 में इस bug को ठीक करने से पहले कितने लोग इसका उपयोग कर रहे थे, यह देखने के बाद ऐसा लगता है कि यह एक सामान्य उपयोग का मामला है।

यहां डेमो है जो 1.2.17 में काम करता है और 1.2.18 से टूटा हुआ है

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

evgenyneu 18 अग॰ 2014

@evgenyneu : यह मानते हुए कि आप आंतरिक सामग्री और कंटेनर निर्देश दोनों को नियंत्रित करते हैं, हमने पाया है कि ट्रांसक्लूड के बजाय ng-include का उपयोग करना स्पष्ट, आसान है, और हमें वह विरासत पैटर्न देता है जो हम चाहते हैं। हम केवल बाहरी निर्देश घोषणा पर एक विशेषता के रूप में एक टेम्पलेट नाम पास करते हैं, और उसी स्थान पर एक एनजी-शामिल निर्देश डालते हैं, जो पहले हमारे पास ट्रांसक्लूड निर्देश था। समस्या हल हो गई।

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

xml 18 अग॰ 2014

@xmilliley , उत्कृष्ट टिप, बहुत बहुत धन्यवाद। यह वास्तव में सबसे साफ तरीका है।

यहाँ डेमो है: http://plnkr.co/edit/4MwEL3?p=preview

evgenyneu 18 अग॰ 2014

दोस्तों आप जानते हैं कि आप इसके बजाय इसे ठीक से कर सकते हैं http://plnkr.co/edit/fw7thti1u4F9ArxsuYkQ?p=preview --- यह सही नहीं है, लेकिन यह आपको वहां ले जाता है

caitp 18 अग॰ 2014

@caitp , अच्छा एक, धन्यवाद। हमारे पास बहुत सारे समाधान हैं!

evgenyneu 18 अग॰ 2014

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

सिलबिंग - ट्रांसक्लूड की गई सामग्री का दायरा उस तत्व के लिए एक सहोदर है जहां ट्रांसक्लूजन होता है। वह वर्तमान एनजी-ट्रांसक्लूड व्यवहार है।
पैरेंट - ट्रांसक्लूड कंटेंट स्कोप उस एलिमेंट का होता है जहां ट्रांसक्लूजन होता है।
चाइल्ड - ट्रांसक्लूड कंटेंट स्कोप चाइल्ड स्कोप से उस एलिमेंट के स्कोप में होता है जहां ट्रांसक्लूजन होता है।

उदाहरण उपयोग:

template: 
  '<div ng-transclude="parent">' +
  '</div>'

पूरा उदाहरण

सभी के उदाहरण के लिए यह प्लंक देखें।

आउटपुट ऐसा दिखता है:

स्रोत

.config(function($provide){
    $provide.decorator('ngTranscludeDirective', ['$delegate', function($delegate) {
        // Remove the original directive
        $delegate.shift();
        return $delegate;
    }]);
})

.directive( 'ngTransclude', function() {
  return {
    restrict: 'EAC',
    link: function( $scope, $element, $attrs, controller, $transclude ) {
      if (!$transclude) {
        throw minErr('ngTransclude')('orphan',
         'Illegal use of ngTransclude directive in the template! ' +
         'No parent directive that requires a transclusion found. ' +
         'Element: {0}',
         startingTag($element));
      }

      var iScopeType = $attrs['ngTransclude'] || 'sibling';

      switch ( iScopeType ) {
        case 'sibling':
          $transclude( function( clone ) {
            $element.empty();
            $element.append( clone );
          });
          break;
        case 'parent':
          $transclude( $scope, function( clone ) {
            $element.empty();
            $element.append( clone );
          });
          break;
        case 'child':
          var iChildScope = $scope.$new();
          $transclude( iChildScope, function( clone ) {
            $element.empty();
            $element.append( clone );
            $element.on( '$destroy', function() {
              iChildScope.$destroy();
            });            
          });
          break;
      }
    }
  }
})

Izhaki 26 अग॰ 2014

👍1

@ इज़ाकी -

xml 27 अग॰ 2014

:+1: @Izhaki के समाधान के लिए। मैं इसे वैसे ही उपयोग करूँगा लेकिन अगर इसे कोणीय में शामिल किया गया तो मैं और अधिक आरामदायक महसूस करूंगा।

ziadsawalha 11 सित॰ 2014

heycalmdown 17 सित॰ 2014

@Izhaki +1, बढ़िया उदाहरण!

SebastianM 17 सित॰ 2014

कस्टम ट्रांसक्लूड निर्देश के लिए धन्यवाद। मैंने डिफ़ॉल्ट को ओवरराइड करने के बजाय बस एक अलग कस्टम ट्रांसक्लूड बनाना समाप्त कर दिया। आपके पैच में कुछ फ़ंक्शन कॉल हैं जो मुझे यकीन नहीं है कि वे कहां से आती हैं। minErr () और startTag ()

dehru 19 सित॰ 2014

@dehru - ये कार्य AngularJS के लिए आंतरिक हैं।

petebacondarwin 20 सित॰ 2014

@Izhaki बहुत बहुत धन्यवाद! मैंने आपके प्लंक को फोर्क किया है जो किसी को दिलचस्पी होने पर ट्रांसक्लूड की गई सामग्री को दोहराता है।
यह उल्लेखनीय है कि एनजी-ट्रांसक्लूड = "पैरेंट" आपकी अपेक्षा के अनुरूप काम नहीं कर सकता है।
http://plnkr.co/edit/S6ngqz?p=preview

plunker_ng-transclude_ng-repeat

thevictor13 20 सित॰ 2014

@Izhaki बहुत बढ़िया।
ऐसा कुछ ऐसा लगता है जो कोणीय के लिए पुल अनुरोध में होना चाहिए ..
कम से कम एक Github रेपो के साथ एक अलग निर्देश में, क्या आपको लगता है कि आप इसे प्रकाशित कर सकते हैं (ताकि मैं कुछ बदलावों की पेशकश कर सकूं ....)?
धन्यवाद

Urigo 21 सित॰ 2014

https://github.com/Izhaki/ngTranscludeMod

Izhaki 23 सित॰ 2014

इज़ाकी, यह कमाल है। मैं दिल से आपको।

elbow-jason 30 अक्तू॰ 2014

@Izhaki यह बाल क्षेत्रों की समस्या का एक बहुत अच्छा समाधान है। धन्यवाद।

हालांकि मैं उलझन में हूं, और सोच रहा था कि क्या आप समझा सकते हैं कि $transclude फ़ंक्शन की विरासत बाहरी निर्देश से ngTransclude निर्देश तक कैसे जाती है? यह स्पष्ट रूप से कहीं भी आधिकारिक रूप से नहीं कहा गया है जो मुझे मिल सकता है, लेकिन मुझे लगता है कि transclude: true को लिंक फ़ंक्शन में $transclude फ़ंक्शन का उपयोग करने के निर्देश पर उपयोग किया जाना था। कोड के साथ थोड़ा खेलने के बाद, मैंने transclude: true का उपयोग करके वास्तव में कोड को तोड़ दिया। यहाँ क्या चल रहा है?

evanyeung 14 नव॰ 2014

मैंने इसके साथ दिनों के साथ-साथ इस तथ्य के साथ संघर्ष किया कि ट्रांसक्लूड तत्वों को उनके साथ बदलने के बजाय ट्रांसक्लूड प्लेसहोल्डर के भीतर सम्मिलित करता है।

मैंने पाया है कि ng-transclude-replace दोनों मुद्दों को संभालता है! http://gogoout.github.io/angular-directives-utils/#/api/ng -directives-utils.transcludeReplace

मुझे एनजी-रिपीट निर्देश को बार-बार निर्देश या किसी भी प्रकार के निर्देश में प्रचारित करने की आवश्यकता नहीं है! सभी सत्यापन/बाइंडिंग सहित सभी काम कर रहे प्रतीत होते हैं।

यहाँ मेरे कोड का एक टुकड़ा है:

<form-field label="Roles" required>
    <checkbox-group>
        <checkbox ng-repeat="role in roles" label="{{role.description}}">
            <input type="checkbox" name="selectedRoles" ng-model="role.selected" value="{{role.description}}" ng-required="!hasRole" />
        </checkbox>
    </checkbox-group>
</form-field>

abobwhite 9 दिस॰ 2014

@abobwhite एनजी-ट्रांसक्लूड-रिप्लेस का उल्लेख करने के लिए धन्यवाद, बढ़िया फिक्स।

aparij 28 मई 2015

मैंने हाल ही में इस समस्या में भाग लिया है। जबकि @Izhaki ने मेरे लिए काम किया है, मैं उत्सुक हूं कि क्या इस चर्चा के बाद के समय में कोई सर्वोत्तम अभ्यास सामने आया है। विशेष रूप से, ng-transclude="sibling | parent | child" को कोणीय कोर का हिस्सा बनाने में कोई दिलचस्पी रही है?

telekid 26 अप्रैल 2016

@telekid - अभी इस सुविधा को कोर में शामिल करने की हमारी कोई योजना नहीं है।

petebacondarwin 26 अप्रैल 2016

मैं देखता हूं कि समाधान हैं और आसपास काम करते हैं, लेकिन यह बहुत सुविधाजनक होगा यदि निर्देश के अंदर के दायरे तक पहुंचने का कोई तरीका था।

moneytree-doug 3 मई 2016

मैं यह बताना चाहूंगा कि मैंने ट्रांसक्लूड मॉड को अपडेट किया है जिसे @Izhaki ने कोणीय 1.5 में बनाया है ताकि यह मल्टी-स्लॉट ट्रांसक्लूजन के साथ काम करे।
शाखा: https://github.com/NickBolles/ngTranscludeMod/tree/Angular1.5-multi-slot
पीआर: https://github.com/Izhaki/ngTranscludeMod/pull/2
प्लंकर: http://plnkr.co/edit/5XGBEX0muH9CSijMfWsH?p=preview

NickBolles 3 मई 2016

तो मेरे पास कुछ ऐसा है:

angular.module('test').directive('myDirectiveWithTransclusion', function() {
     return {
          restrict: 'E'
          transclude: {
               transcludeThis: 'transcludeThis'
          }
          template: "<div ng-repeat='item in array'><div ng-transclude='transcludeThis'></div></div>"
     }
})

<my-directive-with-transclusion>
     <transclude-this>
          {{$parent.item}}
     </transclude-this>
</my-directive-with-transclusion>

moneytree-doug 4 मई 2016

👍13 ❤8 🎉2

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

sy-tian 5 जन॰ 2017

@szetin क्या आप एक jsfiddle डाल सकते हैं जो मुझे दिखा रहा है कि आप क्या उम्मीद कर रहे हैं बनाम क्या हो रहा है?

moneytree-doug 10 जन॰ 2017

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स