কৌণিক নির্দেশিকা প্রসারিত করা হচ্ছে

114

আমি একটি তৃতীয় পক্ষের নির্দেশিকায় (বিশেষত কৌণিক UI বুটস্ট্র্যাপ ) একটি ছোটখাট পরিবর্তন করতে চাই । আমি কেবল 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- স্বীকৃতি- দিকনির্দেশ

দ্রষ্টব্য: আমার পূর্ববর্তী উত্তরটি কোনও তৃতীয় পক্ষের পরিষেবাটি পরিবর্তনের জন্য ছিল, কোনও নির্দেশ নয় c

— দেনিযেল
সূত্র

3

ধন্যবাদ @ sh0ber, আমার ঠিক এটির দরকার ছিল। এবং আপনার পূর্ববর্তী উত্তর আমাকে পাশাপাশি সহায়তা করেছিল, তৃতীয় পক্ষের পরিষেবাগুলি services

— কাইল

আরে, এই উত্তরটি সত্যিই ভাল তবে দিকনির্দেশনার জন্য "অগ্রাধিকার" সম্পত্তি সম্পর্কে কোনও দলিল খুঁজে পাচ্ছি না। আমি খুঁজে পাওয়া সমস্তগুলিই একটি ব্লার্ব ছিল যা "আপনি এটি ব্যবহার করতে পারেন" বলেছিলেন, তবে এর কোনও প্রকৃত উদাহরণ খুঁজে পাচ্ছেন না।

— সিল

2

@ সিয়েল নির্দেশক এপিআই তথ্যটি সম্ভবত স্পষ্টতই এখানে$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.13 সংস্করণে কাজ করবে না।

— ইলিরান মালকা
সূত্র

1

আমি আপনাকে @ sh0ber এর উত্তরটি একবারে দেওয়ার পরামর্শ দিন (ইভেন্টগুলি নির্গত করার জন্য কেবল অন্য নির্দেশিকা তৈরি করুন)।

— ইলিরান মালকা

2

এই উত্তর সম্পর্কে একটি দ্রষ্টব্য নোট (যা দুর্দান্ত কাজ করে), 'প্যানডাইরেক্টিভ'-এর' নির্দেশিকা 'এর একটি উদ্দেশ্য রয়েছে ;-) তা বের করার আগে আমাকে কিছুটা সময় লেগেছে: stackoverflow.com/questions/19409017/… , স্বীকৃত দেখুন উত্তর.

— রায় মাইল্ডার

2

হাই @ ইলিরানমালকা আমার প্লাঙ্কার চেক করুন plnkr.co/edit/0mvQjHYjQCFS6joYJdwK আশা করি এটি কারও সাহায্য করবে

— জিতেন্দ্র চৌহান

1

লিঙ্কটি নষ্ট decorator()হয়ে গেছে ( ডকস.আঙ্গুলারজেএস.আর.আইপিআই / অটো / সার্ভিস / অ্যাপ্রোভিড# ডিকোরেটর আপডেট হয়েছে )

— ক্রিস ব্রাউন

1

@ ইলিরানমালকা হ্যাঁ, bindToControllerv1.3 তে প্রবর্তিত হয়েছিল। তবে মনে রাখবেন যে এটি কোনও বিকল্প সমাধান হিসাবে বিবেচিত হবে না, এটি কেবলমাত্র একটি নির্দিষ্ট ক্ষেত্রে যেখানে মূল নির্দেশটি bindToControllerসম্পত্তি নিয়ে সেট আপ করা হয়েছিল । ভাল ধারণা, আমি এটি উত্তর হিসাবে পোস্ট করব :)

— gilad mayani

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

এটি দুর্দান্ত, আমার নিজের ভেরিয়েবলগুলির সাথে বিচ্ছিন্ন দিক নির্দেশকে প্রসারিত করার জন্য যা প্রয়োজন ছিল তা ঠিক !! আমি খুঁজে পেয়েছি যে কৌণিক.একসেটটি বস্তুগুলি গভীর-অনুলিপি করে না, সুতরাং এটি পেনডাইরেক্টিভের স্কোপ অবজেক্টটিকে এটির সাথে প্রতিস্থাপন করে। একটি বিকল্প হল কৌণিক.রোম যা পেনডাইরেক্টিভ থেকে মূল স্কোপটি রাখবে এবং এখানে সংজ্ঞায়িত ভেরিয়েবল যুক্ত / সংযোজন করবে।

— ম্যাথিউগুয়েস্ট

1

হ্যাঁ, angular.mergeব্যবহার করা উচিত ছিল, আমি উদাহরণটি আপডেট করব

— কিডডোকা

1

bindToControllerসম্পত্তি রয়েছে এমন নির্দেশকের সাথে বাইন্ডিংগুলি বাড়ানোর ভিন্ন দৃশ্যের জন্য এখানে আরও একটি সমাধান ।

দ্রষ্টব্য: এটি এখানে প্রস্তাবিত অন্যান্য সমাধানগুলির বিকল্প নয়। এটি কেবলমাত্র একটি নির্দিষ্ট কেস সমাধান করে (অন্যান্য জবাবগুলিতে আচ্ছাদিত নয়) যেখানে মূল নির্দেশটি সেট আপ করা হয়েছিল bindToController।

— গিলাদ মায়ানী
সূত্র