ডিফল্ট বিকল্পগুলির সাথে কৌনিক জেএস নির্দেশিকা

Question

আমি কেবল কৌণিক জাল দিয়ে শুরু করছি, এবং কয়েকটি পুরাতন জিকুয়েরি প্লাগইনগুলি কৌনিক নির্দেশে রূপান্তর করতে কাজ করছি। আমি আমার (উপাদান) নির্দেশের জন্য ডিফল্ট বিকল্পগুলির একটি সেট সংজ্ঞায়িত করতে চাই, যা কোনও অ্যাট্রিবিউটের বিকল্প মান উল্লেখ করে ওভাররাইড করা যেতে পারে।

অন্যরা কীভাবে এটি করেছে তার জন্য আমি একবার ঘুরে দেখেছি এবং কৌণিক-ইউআই লাইব্রেরিতে ui.bootstrap.pagination তেমন কিছু করেছে বলে মনে হচ্ছে।

প্রথমে সমস্ত ডিফল্ট বিকল্পগুলি একটি ধ্রুবক অবজেক্টে সংজ্ঞায়িত হয়:

.constant('paginationConfig', {
  itemsPerPage: 10,
  boundaryLinks: false,
  ...
})

তারপরে কোনও getAttributeValueইউটিলিটি ফাংশন নির্দেশক নিয়ামকের সাথে সংযুক্ত থাকে:

this.getAttributeValue = function(attribute, defaultValue, interpolate) {
    return (angular.isDefined(attribute) ?
            (interpolate ? $interpolate(attribute)($scope.$parent) :
                           $scope.$parent.$eval(attribute)) : defaultValue);
};

অবশেষে, এটিকে বৈশিষ্ট্যগুলিতে পড়ার জন্য এটি লিঙ্কিং ফাংশনে ব্যবহৃত হয়

.directive('pagination', ['$parse', 'paginationConfig', function($parse, config) {
    ...
    controller: 'PaginationController',
    link: function(scope, element, attrs, paginationCtrl) {
        var boundaryLinks = paginationCtrl.getAttributeValue(attrs.boundaryLinks,  config.boundaryLinks);
        var firstText = paginationCtrl.getAttributeValue(attrs.firstText, config.firstText, true);
        ...
    }
});

এটি মানক হিসাবে ডিফল্ট মানগুলির একটি সেট প্রতিস্থাপন করতে চাইলে একটি জটিল সেটআপের মতো বলে মনে হয়। এটি করার জন্য অন্য কোনও উপায় আছে যা প্রচলিত? অথবা সর্বদা কোনও ইউটিলিটি ফাংশন যেমন getAttributeValueএবং পার্স অপশনগুলি এভাবেই সংজ্ঞায়িত করা স্বাভাবিক ? এই সাধারণ কাজের জন্য লোকেরা কী কী কৌশল নিয়েছে তা জানতে আগ্রহী।

এছাড়াও, বোনাস হিসাবে, আমি কেন interpolateপ্যারামিটার প্রয়োজন তা পরিষ্কার নয় ।

Answer 1

আপনি compileফাংশন ব্যবহার করতে পারেন - বৈশিষ্ট্যগুলি সেট না করা থাকলে সেগুলি পড়ুন - সেগুলি ডিফল্ট মান সহ পূরণ করুন।

.directive('pagination', ['$parse', 'paginationConfig', function($parse, config) {
    ...
    controller: 'PaginationController',
    compile: function(element, attrs){
       if (!attrs.attrOne) { attrs.attrOne = 'default value'; }
       if (!attrs.attrTwo) { attrs.attrTwo = 42; }
    },
        ...
  }
});

Comments

ধন্যবাদ! সুতরাং কেন ui.bootstrap.paginationআরও কিছু জটিল বিষয়গুলিতে কোনও চিন্তা ? ভেবেছিল যে সংকলন ফাংশনটি ব্যবহার করা হলে পরে করা কোনও বৈশিষ্ট্য পরিবর্তনগুলি প্রতিফলিত হবে না, তবে এটি সত্য বলে মনে হয় না কারণ কেবলমাত্র এই পর্যায়ে ডিফল্ট সেট করা আছে। অনুমান করুন এখানে অবশ্যই কিছু ট্রেড অফ করা হচ্ছে।

— কেন চ্যাটফিল্ড

আপনার মধ্যে @ কেন চ্যাটফিল্ড compileবৈশিষ্ট্যগুলি পড়তে পারে না, যা মান পেতে (যা অভিব্যক্তি ধারণ করে) ইন্টারপোল্ট করা উচিত। তবে আপনি যদি কেবল খালিটি খালি কিনা তা পরীক্ষা করতে চান - এটি আপনার জন্য কোনও ট্রেডঅফ ছাড়াই কাজ করবে (ইন্টারপোলেশন অ্যাট্রিবিউটে এক্সপ্রেশন সহ স্ট্রিং থাকবে)।

— ওজেড_

ফ্যান্টাস্টিক! আপনার পরিষ্কার ব্যাখ্যার জন্য অনেক ধন্যবাদ। ভবিষ্যতের পাঠকদের জন্য যদিও মূল প্রশ্নের স্পর্শকাতর হলেও 'ইন্টারপোলেট' প্যারামিটার ui.bootstrap.paginationউদাহরণে কী করে তা ব্যাখ্যা করার জন্য আমি এই অত্যন্ত দরকারী উদাহরণটি পেয়েছি: jsfiddle.net/EGfgH

— কেন চ্যাটফিল্ড

সমাধানের জন্য অনেক ধন্যবাদ। নোট করুন যে আপনার যদি linkবিকল্পের প্রয়োজন হয় তবে আপনি নিজের বিকল্পের কোনও ফাংশন ফিরিয়ে দিতে পারেন compile। ডক এখানে

— শঙ্কিত

মনে রাখবেন, এই বৈশিষ্ট্যগুলির মানগুলির প্রয়োজন যেমনটি সেগুলি টেমপ্লেট থেকে পাস হবে। আপনি যদি অ্যারে ফে পাশ করে থাকেন তবে এটির attributes.foo = '["one", "two", "three"]'পরিবর্তে হওয়া উচিতattributes.foo = ["one", "two", "three"]

— ডোমিনিক এহরেনবার্গ

Answer 2

=?নির্দেশের স্কোপ ব্লকে সম্পত্তিটির জন্য পতাকা ব্যবহার করুন Use

angular.module('myApp',[])
  .directive('myDirective', function(){
    return {
      template: 'hello {{name}}',
      scope: {
        // use the =? to denote the property as optional
        name: '=?'
      },
      controller: function($scope){
        // check if it was defined.  If not - set a default
        $scope.name = angular.isDefined($scope.name) ? $scope.name : 'default name';
      }
    }
  });

Comments

=?1.1.x থেকে পাওয়া যায়

— মাইকেল

যদি আপনার বৈশিষ্ট্যটি মান হিসাবে trueবা falseমান হিসাবে গ্রহণ করতে পারে তবে আপনি (আমি মনে করি) $scope.hasName = angular.isDefined($scope.hasName) ? $scope.hasName : false;পরিবর্তে উদাহরণ ব্যবহার করতে চাই ।

— পল ডি ওয়েট

দ্রষ্টব্য: এটি কেবল দ্বিমুখী বাঁধাইয়ের সাথে কাজ করে, উদাহরণস্বরূপ =?, তবে একমুখী বাঁধাইয়ের সাথে নয় @?।

— জাস্টাস রোমিজন

এছাড়াও কেবল টেমপ্লেটেই করা যেতে পারে: টেমপ্লেট: 'হ্যালো {{নাম || default 'ডিফল্ট নাম \'}} '

— ভিল

ডিফল্ট মান নিয়ামক বা linkফাংশনে সেট করা উচিত ? আমার বোঝার উপর ভিত্তি করে, সময় নির্ধারণের সময় linkএকটি $scope.$apply()চক্র এড়ানো উচিত, তাই না?

— আগস্টিন রিডিংগার

Answer 3

আমি AngularJS v1.5.10 ব্যবহার করছি এবং ডিফল্ট অ্যাট্রিবিউট মানগুলি সেট করার জন্য কমপিলে preLinkফাংশনটি ভালভাবে কাজ করতে পেয়েছি ।

কেবল একটি অনুস্মারক:

• attrsকাঁচা DOM বৈশিষ্ট্য মানগুলি ধারণ করে যা সর্বদা হয় undefinedবা স্ট্রিং থাকে।
• scope(অন্যান্য বিষয় ছাড়াও) ঝুলিতে করে DOM অ্যাট্রিবিউট মান পার্স প্রদান বিছিন্ন সুযোগ স্পেসিফিকেশন অনুযায়ী ( =/ </ @/ ইত্যাদি)।

সংক্ষিপ্ত বিবরণ:

.directive('myCustomToggle', function () {
  return {
    restrict: 'E',
    replace: true,
    require: 'ngModel',
    transclude: true,
    scope: {
      ngModel: '=',
      ngModelOptions: '<?',
      ngTrueValue: '<?',
      ngFalseValue: '<?',
    },
    link: {
      pre: function preLink(scope, element, attrs, ctrl) {
        // defaults for optional attributes
        scope.ngTrueValue = attrs.ngTrueValue !== undefined
          ? scope.ngTrueValue
          : true;
        scope.ngFalseValue = attrs.ngFalseValue !== undefined
          ? scope.ngFalseValue
          : false;
        scope.ngModelOptions = attrs.ngModelOptions !== undefined
          ? scope.ngModelOptions
          : {};
      },
      post: function postLink(scope, element, attrs, ctrl) {
        ...
        function updateModel(disable) {
          // flip model value
          var newValue = disable
            ? scope.ngFalseValue
            : scope.ngTrueValue;
          // assign it to the view
          ctrl.$setViewValue(newValue);
          ctrl.$render();
        }
        ...
    },
    template: ...
  }
});