AngularJS: पहले डायरेक्टिविटी से एक दूसरे को विशेषता का स्पष्टीकरण नहीं कर सकता।(w/plunker उदाहरण)




angularjs-directive angularjs-controller (4)

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

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

<!-- HTML -->
<one for-two="{{test}}"></one>

// JS
angular.
  module('myApp', []).
  directive('one', oneDirective).
  directive('two', twoDirective);

function oneDirective() {
  return {
    restrict: 'E',
    scope: true,
    link: function onePostLink(scope, elem, attrs) {
      scope.two = attrs.forTwo;
    },
    template: '<two></two>'
  };
}

function twoDirective() {
  return {
    restrict: 'E',
    template: 'Hello, {{two}} !'
  };
}

संदर्भ

संदर्भ लातूर: http://plnkr.co/edit/otv5mVVQ36iPi3Mp0FYw?p=preview

इस मुद्दे का स्पष्टीकरण

मान लीजिए कि हमारे पास दो निर्देश, first-directive और second-directive अब मान लीजिए कि हमारे पास केवल first-directive लिए उपयोग किया गया है, जिसे हम second-directive दिशाओं को लपेट करने की आशा करते हैं और इसे हमारे स्वयं के हेरफेर वाले गुणों को पास करते हैं।

app.directive('firstDirective', function() {
  return {
    scope: true,
    priority: 1000,
    transclude: true,

    template: function(element,attributes){
      console.log('template')
      return '<second-directive two="{{one}}"></second-directive>'
    },

    compile: function(element,attributes) {
      console.log('compile')
      return {
        pre: function(scope){
          scope.one = 'foo'
            console.log('cpre')
        },
        post: function(scope){
          scope.one = 'foo'
            console.log('cpost')
        },
      }
    },

    controller: ['$scope','$attrs',function($scope,$attrs){
      console.log('controller');
      $scope.one = 'foo';
    }],
  }
})

app.directive('secondDirective',function(){
  return {
    template: function (element,attributes){
      console.log(attributes.two) //{{one}} not 'foo' or 'test'
      return 'Hello {{two}}'
    }
  }
});    

first-directive निम्नानुसार कहा जा रहा है:

<first-directive one='test'></first-directive>

console.log आउटपुट निम्नानुसार है:

template
compile
{{one}}
controller
cpre
cpost

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

सवाल यह है:

मैं गतिशील विशेषता मान के साथ second-directive कैसे कॉल करूं, जिसे मैं चाहता हूं? ध्यान रखें कि second-directive पूरी तरह से स्वतंत्र है और हम वहां कोड नहीं जोड़ सकते।

पीएस - मेरे पास एक संभव विचार है कि दूसरे निर्देशों को निम्नानुसार कॉल करना है:

template: function(element,attributes){
  console.log('template')
  var explicit = ???? /* how to access scope? */
  return '<second-directive two="'+ explicit +'"></second-directive>'
},

या वैकल्पिक रूप से

template: function(element,attributes){
  console.log('template')
  return $interpolate('<second-directive two="{{one}}"></second-directive>')(scopeObj) /* how does one access scopeObj with current scope values here? */
},

फिर भी, मुझे यकीन नहीं है कि किसी भी अन्य कार्य के पहले कहा जाने वाला मूल्य पहले से निर्देशित करने के लिए कैसे किया जाता है। नियंत्रक को $ दायरे तक पहुंच है और इसे टेम्प्लेट के बाद कहा जाता है।

आपके सुझाव काफी सराहना करते हैं।


क्या आपने दूसरा निर्देश लिखा है?

<second-directive two="'+ explicit +'"></second-directive>

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

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


मैं सीखने के लिए आपके प्रश्न का उपयोग कर रहा हूं, लेकिन मैं इसे खोजने में सक्षम था, जो आपके लिए काम कर सकता है:

app.directive("tryThis", function($compile){
    return{
        scope: {
          one: '@',
        },
        link: function(scope, element){
            var template = '<second-directive two="'+scope.one+'"></second-directive>';
            var linkFn = $compile(template);
            var content = linkFn(scope);
            element.append(content);
        }
    }
});

Plunkr यहाँ है , ध्यान दें कि test {{one}} बजाय अब कंसोल में लॉग किया गया है। यदि दूसरा डायरेक्टिव को पृथक गुंजाइश दिया जाता है, तो स्क्रीन पर स्क्रीन पर दिखाया जाएगा।

इस लिंक ने मुझे संकल्पित समस्या को समझने में भी मदद की, 'संकलन के दौरान कोई गुंजाइश' के मुद्दे पर कुछ संदर्भ देने के लिए - मुझे यकीन नहीं है कि इसके चारों ओर कोई रास्ता नहीं है।


आप transclude: true लेकिन इसे टेम्पलेट में उपयोग नहीं कर रहे हैं। क्या आप इस मार्कअप का उपयोग नहीं कर सकते हैं और पहले निदेशात्मक उपयोग के लिए टेम्पलेट है <ng-transclude> ? आपके पास scope: true तो आप माता-पिता / नियंत्रक से संपत्ति को हेरफेर कर सकते हैं और ये बदलाव दोनों निर्देशों पर लागू होंगे।

मार्कअप

<first-directive one="test">
    <second-directive two="test"></second-directive>        
</first-directive>

प्रथम निर्देश के लिए टेम्पलेट

template: `<div>
               my first directive content
               <ng-transclude></ng-transclude>
           </div>`;

https://docs.angularjs.org/api/ng/directive/ngTransclude







angularjs-compile