डिफ़ॉल्ट विकल्पों के साथ कोणीयजेएस निर्देश

Question

मैं बस कोणीय के साथ शुरू कर रहा हूं, और कुछ पुराने JQuery प्लग इन को कोणीय निर्देशों में परिवर्तित करने पर काम कर रहा हूं। मैं अपने (तत्व) निर्देश के लिए डिफ़ॉल्ट विकल्पों के एक सेट को परिभाषित करना चाहूंगा, जिसे किसी विशेषता में विकल्प मान निर्दिष्ट करके ओवरराइड किया जा सकता है।

मैं जिस तरह से दूसरों को यह किया है के लिए चारों ओर एक नज़र है, और कोणीय- 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पैरामीटर की आवश्यकता क्यों है।

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चीजों को और अधिक जटिल तरीके से करता है? यह सोच रहा था कि यदि संकलित फ़ंक्शन का उपयोग करते हुए बाद में किए गए किसी भी विशेषता परिवर्तन को प्रतिबिंबित नहीं किया जाएगा, लेकिन यह सच नहीं दिखता है क्योंकि इस चरण में केवल डिफ़ॉल्ट सेट किए गए हैं। अनुमान है कि यहां कुछ व्यापार किया जाना चाहिए।

— केन चैटफील्ड

@KenChatfield compileआप विशेषताओं को नहीं पढ़ सकते हैं, जिसे मूल्य प्राप्त करने के लिए प्रक्षेपित किया जाना चाहिए (जिसमें अभिव्यक्ति शामिल है)। लेकिन अगर आप केवल चेक करना चाहते हैं कि क्या विशेषता खाली है - यह आपके लिए किसी भी ट्रेडऑफ़ के बिना काम करेगा (इससे पहले कि इंटरपोलेशन विशेषता में अभिव्यक्ति के साथ स्ट्रिंग होगी)।

— OZ_

बहुत खुबस! आपके स्पष्ट स्पष्टीकरण के लिए बहुत बहुत धन्यवाद। भविष्य के पाठकों के लिए, हालांकि मूल प्रश्न के लिए स्पर्शरेखा, उदाहरण में 'इंटरपोलेट' पैरामीटर क्या करता है, इसकी व्याख्या के ui.bootstrap.paginationलिए मुझे यह बहुत उपयोगी उदाहरण मिला: jsfiddle.net/EGfgH

— Ken Chatfield

उस समाधान के लिए बहुत बहुत धन्यवाद। ध्यान दें कि यदि आपको linkविकल्प की आवश्यकता है , तो आप अभी भी अपने compileविकल्प में एक फ़ंक्शन वापस कर सकते हैं । डॉक्टर यहां

— mneute

याद रखें, कि विशेषताओं को मूल्यों की आवश्यकता होती है क्योंकि वे टेम्पलेट से पारित किए जाएंगे। आप एक सरणी गुजर रहे हैं फ़े यह होना चाहिए attributes.foo = '["one", "two", "three"]'के बजायattributes.foo = ["one", "two", "three"]

— डोमिनिक Ehrenberg

Answer 2

=?निर्देश के दायरे ब्लॉक में संपत्ति के लिए ध्वज का उपयोग करें ।

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;इसके बजाय उदा का उपयोग करना चाहते हैं ।

— पॉल डी। वेट

ध्यान दें: यह केवल दो तरह से बाध्यकारी है, जैसे के साथ काम करता =?है, लेकिन एक तरह से आबद्ध नहीं, @?।

— जस्टस रोमिज़न

यह भी केवल टेम्पलेट में ही किया जा सकता है: टेम्पलेट: 'हैलो {{नाम || \ 'डिफ़ॉल्ट नाम \ "}}

— विल

नियंत्रक या linkफ़ंक्शन में डिफ़ॉल्ट मान सेट किया जाना चाहिए ? मेरी समझ के आधार पर, linkएक $scope.$apply()चक्र से बचने के दौरान असाइन करना चाहिए , क्या यह नहीं होना चाहिए?

— ऑगस्टिन रिडिन्गर

Answer 3

मैं AngularJS v1.5.10 का उपयोग कर रहा हूं और डिफ़ॉल्ट विशेषता मान सेट करने के लिए preLinkसंकलन फ़ंक्शन को अच्छी तरह से काम करने के लिए मिला ।

याद दिलाने हेतु:

• attrsरखती कच्चे डोम विशेषता मान जो हमेशा या तो कर रहे हैं undefinedया तार।
• scope(अन्य बातों के अलावा) डोम विशेषता मूल्यों को अलग-थलग गुंजाइश विनिर्देश ( / / / आदि) के अनुसार पार्स किया गया है ।=<@

संक्षिप्त स्निपेट:

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