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


Answers

यद्यपि '@' का उपयोग करना आपके विशेष परिदृश्य के लिए '=' का उपयोग करने से अधिक उपयुक्त है, कभी-कभी मैं '=' ​​का उपयोग करता हूं ताकि मुझे 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) परिभाषित किया गया है।

Question

मेरे 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 + = आनंद




Links