javascript - ডিফল্ট বিকল্প সঙ্গে কৌণিক নির্দেশিকা




angularjs angularjs-directive (2)

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

অন্যরা এই কাজটি করার জন্য আমার চারপাশে নজর ui.bootstrap.pagination এবং ui.bootstrap.pagination ui লাইব্রেরিতে 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 পরামিতি প্রয়োজন।


আপনি 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; }
    },
        ...
  }
});

আমি AngularJS v1.5.10 ব্যবহার করছি এবং ডিফল্ট গুণমান মান নির্ধারণ করার জন্য প্রিন্ঙ্ক কম্পাইল ফাংশনটি কাজ করার জন্য ভালভাবে খুঁজে পেয়েছি।

শুধু একটি অনুস্মারক:

  • 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: ...
  }
});




default-value