একটি কৌণিক জেএস নির্দেশিকা থেকে বৈশিষ্ট্য অ্যাক্সেস করা


95

আমার AngularJS টেমপ্লেটে কিছু কাস্টম এইচটিএমএল সিনট্যাক্স রয়েছে:

<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 এর JavaScript কনসোল থেকে দৃশ্যমান console.log(attrs)

যেকোনো পরামর্শ?

আপডেট: আর্টেমের দ্বারা একটি সমাধান দেওয়া হয়েছিল। এটি করাতে এটি জড়িত:

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

কৌণিক জেএস + স্ট্যাকওভারফ্লো = পরমানন্দ


অন্য প্রশ্নের এই উত্তরটি ব্যাখ্যা করে যে কীভাবে অ্যাঙ্গুলারজেএস-এ সঠিকভাবে প্রকাশ করতে হয়।
ইসমাইল limালিমি

তাই খুব এটি: "
অ্যাঙ্গুলার জেএস

উত্তর:


83

নির্দেশাবলীতে ডকুমেন্টেশন থেকে বিভাগের বৈশিষ্ট্যগুলি দেখুন ।

আন্তঃবিবাহযুক্ত বৈশিষ্ট্য পর্যবেক্ষণ : অন্তরঙ্গকরণ (যেমন src = "{{বার}}") বিশিষ্ট বৈশিষ্ট্যের মান পরিবর্তন পর্যবেক্ষণ করতে Use ব্যবহার করুন Use কেবল এটিই খুব দক্ষ নয় তবে এটি আসল মান সহজেই পাবার একমাত্র উপায় কারণ সংযোগের পর্যায়ে অন্তরবিচ্ছিন্নতাটি এখনও মূল্যায়ন করা হয়নি এবং তাই মানটি এই সময়ে অপরিজ্ঞায়িত হয়ে রয়েছে।



25

যদিও আপনার নির্দিষ্ট দৃশ্যের জন্য '=' ব্যবহার করার চেয়ে '@' ব্যবহার করা আরও উপযুক্ত, তবে কখনও কখনও আমি '=' ব্যবহার করি যাতে আমাকে অ্যাটর্সগুলি ব্যবহার করার কথা মনে না থাকে $ পর্যবেক্ষণ ():

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

বেহালার

'=' দিয়ে আমরা দ্বিমুখী ডেটাবাইন্ডিং পাই, সুতরাং সুযোগটি নিশ্চিত করার জন্য অবশ্যই যত্নবান হতে হবে it শিরোনামে দুর্ঘটনাক্রমে শিরোনামটি সংশোধিত হয়নি। সুবিধাটি হ'ল লিঙ্কিং পর্বের সময় স্থানীয় স্কোপ সম্পত্তি (স্কোপ.টাইটেল) সংজ্ঞায়িত করা হয়।


আরে মার্ক, এই সমাধানগুলি ব্যবহার করার বিষয়ে আপনার মতামত কী, দ্বি-মুখী-ডেটাবাইন্ডিংয়ের বিরুদ্ধে লিঙ্ক অ্যাটর্সগুলিতে পর্যবেক্ষণ ব্যবহারের জন্য কোনও নির্দিষ্ট নির্দেশিকা রয়েছে? আমার মনে হয় দ্বি-মুখী ডেটাবাইন্ডিংটি ব্যবহার করা আরও পরিষ্কার দেখাচ্ছে তবে আমি ভাবছি এটি ব্যবহার না করার কোনও কারণ আছে কিনা?
জেরোইন

@ জিরোইন, আমি এখানে@ বনাম ব্যবহারের দীর্ঘ আলোচনা পোস্ট করেছি । =
রাজকোক
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.