एंगुलरजेएस - निर्देश के लिंक फ़ंक्शन

Question

में अलग-अलग दायरे तक पहुंच मैं अंगुलरजेएस कस्टम निर्देशों पर पहली कोशिश कर रहा हूं।

मुझे निर्देश के लिंक फ़ंक्शन में अलग-अलग दायरे का उपयोग (या समझने) में समस्या हो रही है।

view.html

... 
<raw-data id="request-data" title="XML of the request" data="request">See the request</raw-data> 
... 

request एक चर viewCtrl के दायरे कि एक अनुरोध के एक्सएमएल-स्ट्रिंग में प्रकाशित है:

यहाँ मेरी एप्लिकेशन के इस हिस्से के कोड है।

rawData.js

directives.directive('rawData', function() { 

    return { 
     restrict : 'E', 
     templateUrl : 'partials/directives/raw-data.html', 
     replace : true, 
     transclude : true, 
     scope : { 
      id : '@', 
      title : '@', 
      data : '=' 
     }, 
     link : function($scope, $elem, $attr) { 
      console.log($scope.data); //the data is correclty printed 
      console.log($scope.id); //undefined 
     } 
    }; 
}); 

कच्चे data.html

<div> 
    <!-- Button to trigger modal --> 
    <a href="#{{id}}Modal" role="button" class="btn" data-toggle="modal" ng-transclude></a> 

    <!-- Modal --> 
    <div id="{{id}}Modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="{{id}}Modal" aria-hidden="true"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
      <h3 id="myModalLabel">{{ title }}</h3> 
     </div> 
     <div class="modal-body"> 
      <textarea class="input-block-level" rows="10">{{ data }}</textarea> 
     </div> 
     <div class="modal-footer"> 
      <!-- <button class="btn" ng-click="toggleTagText('')">{{'cacher'}} l'image</button> --> 
      <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Fermer</button> 
     </div> 
    </div> 
</div> 

मुझे समझ नहीं आता क्यों आईडी correclty दिखाया गया है जब मोडल पॉप करता, लेकिन जब मैं console.log() के लिए यह कोशिश करते हैं, इसका मूल्य अपरिभाषित है।

शायद मैं अलग-अलग दायरे मूल्य (= और @) के साथ गलत हूं।

पढ़ने के लिए धन्यवाद। :)

Answer 1

@ के साथ बाध्य संपत्तियों को अलग करना लिंकिंग फ़ंक्शन में तत्काल उपलब्ध नहीं है। आप $observe उपयोग करने की आवश्यकता:

$attr.$observe('id', function(value) { 
    console.log(value); 
}); 

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

तुम सिर्फ तार गुजर रहे हैं, तो आप बस मूल्यों एक बार मूल्यांकन कर सकते हैं बजाय @ का उपयोग कर बंधन की:,

link: function($scope, $elem, $attr) { 
    var id = $attr.id; 
    var title = $attr.title 
    console.log(id, title); 
} 

हालांकि, आपके मामले में जब से तुम टेम्पलेट्स में गुण का उपयोग करना चाहते हैं, तो आप का उपयोग करना चाहिए @।

आप टेम्पलेट का उपयोग कर नहीं कर रहे थे, तो @ जब विशेषता मान {{}} रों – उदाहरण के लिए, title="{{myTitle}}" शामिल उपयोगी है। फिर $observe का उपयोग करने की आवश्यकता अधिक स्पष्ट हो जाती है: आपका लिंकिंग फ़ंक्शन प्रत्येक बार myTitle परिवर्तनों के मान को कुछ भी करना चाहता है।

Answer 2

यह जानबूझकर है और संकलन आदेश और '@' और '=' के बीच का अंतर है।

this Google Groups discussion with input from Misko से कुछ अंश:

@ and = do very different things. One copies the attribute value (which may be interpolated) and the other treats the attribute value as an expression.

@attrs are not $interpolated until later, so they are not available at link time. If you want to do something with them in the link function you either need to $interpolate yourself manually

Answer 3

ठीक है, वास्तव में ऊपर जवाब में से कोई भी एक प्रमुख पहलू का उल्लेख किया, यहां तक ​​कि '=' के साथ, यह मेरे लिए नहीं लगता है आप लिंक समारोह के अंदर गुंजाइश उपयोग कर सकते हैं सीधे निम्नलिखित की तरह,

scope: { 
    data: '=', 
}, 
link: function(scope, elem, attrs) { 
    console.debug(scope.data); // undefined 

लेकिन आप आंतरिक समारोह में गुंजाइश उपयोग कर सकते हैं,

link: function(scope, elem, attrs) { 
    scope.saveComment = function() { 
     console.debug(scope.data); 

तो ऐसा लगता है कि scope.data उपलब्ध होने पर मुझे समय अंतराल हो सकता है।

Answer 4

तुम JSFiddle यहाँ मैंने बनाया यात्रा कर सकते: http://jsfiddle.net/7t984sf9/5/:

link: function($scope, $elem, $attr) { 
    console.log($scope.onewayObject); 
    $attr.$observe('onewayObject', function(value) { 
     console.log(value); 
    }); 
} 

अथवा यहाँ कुछ अधिक विस्तृत विवरण: What is the difference between & vs @ and = in angularJS