angularjs-directive - एक AngularJS निर्देश से विशेषताओं तक पहुंच





(3)


यद्यपि '@' का उपयोग करना आपके विशेष परिदृश्य के लिए '=' का उपयोग करने से अधिक उपयुक्त है, कभी-कभी मैं '=' ​​का उपयोग करता हूं ताकि मुझे attrs का उपयोग करने की याद न हो। $ देखें ():

<su-label tooltip="field.su_documentation">{{field.su_name}}</su-label>

निर्देशक:

myApp.directive('suLabel', function() {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        scope: {
            title: '=tooltip'
        },
        template: '<label><a href="#" rel="tooltip" title="{{title}}" data-placement="right" ng-transclude></a></label>',
        link: function(scope, element, attrs) {
            if (scope.title) {
                element.addClass('tooltip-title');
            }
        },
    }
});

Fiddle

'=' के साथ हमें दो-तरफा डाटाबेसिंग मिलती है, इसलिए यह सुनिश्चित करने के लिए सावधानी बरतनी चाहिए कि स्कोप.title को निर्देश में गलती से संशोधित नहीं किया गया है। लाभ यह है कि लिंकिंग चरण के दौरान, स्थानीय स्कोप संपत्ति (scope.title) परिभाषित किया गया है।

मेरे AngularJS टेम्पलेट में कुछ कस्टम HTML वाक्यविन्यास शामिल हैं:

<su-label tooltip="{{field.su_documentation}}">{{field.su_name}}</su-label>

मैंने इसे संसाधित करने का निर्देश बनाया:

.directive('suLabel', function() {
  return {
    restrict: 'E',
    replace: true,
    transclude: true,
    scope: {
      title: '@tooltip'
    },
    template: '<label><a href="#" rel="tooltip" title="{{title}}" data-placement="right" ng-transclude></a></label>',
    link: function(scope, element, attrs) {
      if (attrs.tooltip) {
        element.addClass('tooltip-title');
      }
    },
  }
})

attrs.tooltip अभिव्यक्ति के अपवाद पर सब कुछ ठीक काम करता है, जो हमेशा undefined लौटाता है, भले ही tooltip विशेषता Google Chrome के जावास्क्रिप्ट कंसोल से console.log(attrs) करते समय दिखाई दे।

कोई उपाय?

अद्यतन: आर्टम द्वारा एक समाधान की पेशकश की गई थी। इसमें ऐसा करने में शामिल था:

link: function(scope, element, attrs) {
  attrs.$observe('tooltip', function(value) {
    if (value) {
      element.addClass('tooltip-title');
    }
  });
}

AngularJS + = आनंद




निर्देशों पर दस्तावेज़ीकरण से अनुभाग Attributes देखें।

इंटरपोलेटेड विशेषताओं को देखते हुए : इंटरपोलेशन वाले गुणों के मान परिवर्तनों का निरीक्षण करने के लिए $ निरीक्षण का उपयोग करें (उदाहरण के लिए src = "{{bar}}")। न केवल यह बहुत ही कुशल है बल्कि वास्तविक मूल्य को आसानी से प्राप्त करने का एकमात्र तरीका भी है क्योंकि लिंकिंग चरण के दौरान इंटरपोलेशन का मूल्यांकन अभी तक नहीं किया गया है और इसलिए मूल्य इस समय अपरिभाषित है।




मैं आमतौर पर इसके लिए jQuery डेटा () फ़ंक्शन का उपयोग करता हूं:

$($0).data().$scope

$ 0 वर्तमान में क्रोम डोम इंस्पेक्टर में आइटम चुना गया है। $ 1, $ 2 .. और इसी तरह पहले से चुने गए आइटम हैं।







angularjs angularjs-directive