कोणीय निर्देशन का विस्तार

114

मैं एक 3 पार्टी निर्देश (विशेष रूप से कोणीय यूआई बूटस्ट्रैप ) के लिए एक मामूली संशोधन करना चाहता हूं । मैं बस के दायरे में जोड़ना चाहता हूंpane निर्देश :

angular.module('ui.bootstrap.tabs', [])
.controller('TabsController', ['$scope', '$element', function($scope, $element) {
  // various methods
}])
.directive('tabs', function() {
  return {
    // etc...
  };
})
.directive('pane', ['$parse', function($parse) {
  return {
    require: '^tabs',
    restrict: 'EA',
    transclude: true,
    scope:{
      heading:'@',
      disabled:'@' // <- ADDED SCOPE PROPERTY HERE
    },
    link: function(scope, element, attrs, tabsCtrl) {
      // link function
    },
    templateUrl: 'template/tabs/pane.html',
    replace: true
  };
}]);

लेकिन मैं भी कोणीय-बूटस्ट्रैप को बोवर के साथ अद्यतित रखना चाहता हूं। जैसे ही मैं दौड़ता हूंbower update हूँ, मैं अपने परिवर्तनों को लिख देता हूँ।

तो मैं इस निर्देश को इस बोवर घटक से अलग करने के बारे में कैसे जाना है?

— केली
स्रोत

2

सबसे साफ तरीका यह होगा कि $provide.decorator(), नीचे मेरा जवाब देखें।

— एलिरन मलका

96

संभवतः इसे हल करने का सबसे सरल तरीका यह है कि आप अपने ऐप पर तीसरे पक्ष के निर्देश के समान नाम के साथ एक निर्देश बनाएँ। दोनों निर्देश चलेंगे और आप अपने रन ऑर्डर को निर्दिष्ट कर सकते हैंpriority संपत्ति हैं (उच्च प्राथमिकता पहले चलाता है)।

दोनों निर्देश गुंजाइश साझा करेंगे और आप अपने निर्देश के linkतरीके के माध्यम से तीसरे पक्ष के निर्देश के दायरे को एक्सेस और संशोधित कर सकते हैं ।

विकल्प 2: आप अपने स्वयं के मनमाने ढंग से नामित नाम को इसके साथ एक ही तत्व पर रखकर तीसरे पक्ष के निर्देश के दायरे तक भी पहुंच सकते हैं (यह मानते हुए कि न तो निर्देश अलग-अलग गुंजाइश का उपयोग करता है)। एक तत्व पर सभी गैर-अलग-अलग गुंजाइश निर्देश गुंजाइश साझा करेंगे।

आगे पढ़ना: https://github.com/angular/angular.js/wiki/Dev-Guide%3A-Understanding-Directives

नोट: मेरा पिछला उत्तर किसी तीसरे पक्ष की सेवा को संशोधित करने के लिए था, न कि किसी निर्देश पर।

— सज्जन
स्रोत

3

धन्यवाद @ sh0ber, यह वही है जो मुझे चाहिए था। और आपके पिछले उत्तर ने मुझे फिर से मदद की: 3 पार्टी सेवाएं।

— काइल

अरे, यह उत्तर वास्तव में अच्छा है, लेकिन मैं निर्देशों के लिए "प्राथमिकता" संपत्ति के बारे में कोई दस्तावेज नहीं पा सकता हूं। मैंने पाया कि एक धुंधला था जो कहता है कि "आप इसका उपयोग कर सकते हैं", लेकिन इसका कोई वास्तविक उदाहरण नहीं मिल सकता है।

— Ciel

2

@Ciel निर्देश एपीआई जानकारी जाहिरा तौर पर यहाँ$compile डॉक्टर के पास ले जाया गया है

— डैन

60

टीएल; डीआर - जिममे था डेमो!

Big Demo Button

उपयोग $provide's decorator()करने के लिए, ठीक है, तीसरे पक्ष के निर्देश को सजाने।

हमारे मामले में, हम निर्देश के दायरे को बढ़ा सकते हैं जैसे:

app.config(function($provide) {
    $provide.decorator('paneDirective', function($delegate) {
        var directive = $delegate[0];
        angular.extend(directive.scope, {
            disabled:'@'
        });
        return $delegate;
    });
});

सबसे पहले, हम paneइसके नाम को पारित करके निर्देश को सजाने का अनुरोध करते हैं , Directiveजिसे पहले तर्क के रूप में समझा जाता है, फिर हम इसे कॉलबैक पैरामीटर (जो उस नाम से मेल खाने वाले निर्देशों की एक सरणी है) से पुनः प्राप्त करते हैं।

एक बार जब हम इसे प्राप्त कर लेते हैं, तो हम इसकी गुंजाइश वस्तु प्राप्त कर सकते हैं और इसे आवश्यकतानुसार बढ़ा सकते हैं। ध्यान दें कि यह सब configब्लॉक में किया जाना है ।

कुछ नोट

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

— एलिरन मलका
स्रोत

1

मेरा सुझाव है कि आप @ sh0ber के उत्तर को जाने दें (घटनाओं को छोड़ने के लिए एक और निर्देश बनाएं)।

— एलिरन मलका

2

इस उत्तर के बारे में एक संक्षिप्त संदेश (जो अच्छा काम करता है), 'paneDirective' में 'निर्देशक' एक उद्देश्य है ;-) यह मेरे लगाना है कि बाहर से पहले कुछ समय लिया: stackoverflow.com/questions/19409017/... , स्वीकार किए जाते हैं को देखने के जवाब।

— रॉय मिलर

2

hi @EliranMalka मेरे प्लंकर की जाँच करें plnkr.co/edit/0mvQjHYjQCFS6joYJdwK उम्मीद है कि इससे किसी को मदद मिलेगी

— जीतेंद्र चौहान

1

इसका लिंक decorator()टूटा हुआ है ( docs.angularjs.org/api/auto/service/$provide#decorator पर अपडेट किया गया है )

— क्रिस ब्राउन

1

@EliranMalka हाँ, bindToControllerv1.3 में पेश किया गया था। लेकिन ध्यान दें कि यह एक वैकल्पिक समाधान नहीं माना जाता है, यह केवल एक विशिष्ट मामले के लिए है जहां bindToControllerसंपत्ति के साथ मूल निर्देश स्थापित किया गया था । अच्छा विचार है, मैं इसे एक उत्तर के रूप में पोस्ट करूंगा :)

— गिलाद मेयानी

8

हालांकि यह आपके प्रश्न का सीधा उत्तर नहीं है, आप यह जानना चाह सकते हैं कि http://angular-ui.github.io/bootstrap/ के नवीनतम संस्करण (मास्टर में) टैब को अक्षम करने के लिए समर्थन जोड़ा गया है। इस सुविधा के माध्यम से जोड़ा गया था: https://github.com/angular-ui/bootstrap/commit/2b78dd16abd7e09846fa484331b5c35ece6619a2

— pkozlowski.opensource
स्रोत

सिर के लिए +1। जानकार अच्छा लगा। मुझे लगता है कि बोवर कोणीय-बूटस्ट्रैप और कोणीय-यूआई के बूटस्ट्रैप घटक सिंक से बाहर हैं।

— काइल

6

एक और समाधान जहां आप एक नया निर्देश बनाते हैं जो मूल निर्देश को संशोधित किए बिना इसे विस्तारित करता है

समाधान डेकोरेटर समाधान के समान है:

एक नया निर्देश बनाएँ और निर्भरता को उस निर्देश के रूप में इंजेक्ट करें जिसे आप विस्तारित करना चाहते हैं

app.directive('extendedPane', function (paneDirective) {

  // to inject a directive as a service append "Directive" to the directive name
  // you will receive an array of directive configurations that match this 
  // directive (usually only one) ordered by priority

  var configExtension = {
     scope: {
       disabled: '@'
     }
  }

  return angular.merge({}, paneDirective[0], configExtension)
});

इस तरह आप एक ही ऐप में मूल निर्देश और विस्तारित संस्करण का उपयोग कर सकते हैं

— kidroca
स्रोत

2

यह बहुत अच्छा है, बस मुझे अपने स्वयं के चर के साथ एक अलग गुंजाइश निर्देश का विस्तार करने की आवश्यकता है !! मुझे पता चला कि कोणीय. कस्टम वस्तु की गहरी-प्रतिलिपि नहीं करता है, इसलिए यह इस के साथ paneDirective की गुंजाइश ऑब्जेक्ट को प्रतिस्थापित करता है। एक विकल्प angular.merge है जो PaneDirective से मूल गुंजाइश रखेगा और यहाँ परिभाषित चर जोड़ / मर्ज करेगा।

— मैथ्यूगुएस्ट

1

हां, angular.mergeइस्तेमाल किया जाना चाहिए था, मैं उदाहरण को अपडेट

— करूंगा

1

यहाँ एक निर्देश के लिए बाइंडिंग के एक अलग परिदृश्य के लिए एक और समाधान हैbindToControllerसंपत्ति के ।

नोट: यह अन्य समाधानों का विकल्प नहीं है जो यहां पेश किए गए थे। यह केवल एक विशिष्ट मामले (अन्य उत्तरों में शामिल नहीं) को हल करता है जहां मूल निर्देश के साथ सेट-अप किया गया था bindToController।

— गिलाद मेयानी
स्रोत