एक कोणीयजेएस निर्देश से अभिगम विशेषताएँ

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 क्रोम के जावास्क्रिप्ट कंसोल से विशेषता दिखाई देती है console.log(attrs)।

कोई उपाय?

अद्यतन: एक समाधान Artem द्वारा की पेशकश की थी। इसमें यह शामिल है:

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

AngularJS + stackoverflow = आनंद

Comments

एक अन्य प्रश्न का यह उत्तर बताता है कि एंगुलरजेएस में एक टर्नरी को ठीक से कैसे व्यक्त किया जाए।

— इस्माईल ग़ालिमी

तो यह बहुत: "AngularJS + stackoverflow = bliss"

— घुमाएँ

Answer 1

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

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

Comments

URL अब docs.angularjs.org/api/ng/service/$compile#Attributes

— bhatiaravi

Answer 2

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

<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');
            }
        },
    }
});

फील करना ।

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

Comments

हे मार्क, इन समाधानों का उपयोग करने के बारे में आपकी क्या राय है, क्या दो-तरफा-डेटाबाइंडिंग का उपयोग करने के खिलाफ लिंक अटार्स पर अवलोकन के लिए एक विशिष्ट दिशानिर्देश है? मुझे लगता है कि यह दो-तरफ़ा डेटाबाइंडिंग का उपयोग करने के लिए क्लीनर दिखता है लेकिन मुझे आश्चर्य है कि क्या इसका उपयोग न करने का कोई कारण है?

— जेरोएन

@ जोरेन, मैंने यहाँ@ बनाम का उपयोग करने की लंबी चर्चा पोस्ट की । =

— मार्क राजकोक