कोणीय बूटस्ट्रैप accordion हेडर में unclickable सामग्री कैसे जोड़ें?

Question

accordion-heading में डिफ़ॉल्ट सामग्री अनुभाग को टॉगल करने के लिए सभी क्लिक करने योग्य होगी, लेकिन अब मुझे हेडर में कुछ और जोड़ने की आवश्यकता है जो क्लिक करने योग्य नहीं है। यह कैसे कर सकता है?

<accordion-group is-open="OpenOneAtTime" ng-repeat="destination in mileage.destionations" style='position:relative;'> 
    <accordion-heading> 
     <!-- All I want is only make "Toggle Me" clickable, and leave other content in the header alone,just like pure text. --> 
     <span ng-class="{'fa-chevron-down': OpenOneAtTime, 'fa-chevron-right': !OpenOneAtTime}">Toggle Me</span> 
     <span ng-show='!OpenOneAtTime'>{{destination.Total}}+{{destination.To}}</span> 
    </accordion-heading> 
    <div class='accordion-section'> 
     main content 
    </div> 
    <div class='clear'></div> 
</accordion-group> 

Answer 1

यह आसान नहीं है। मैंने इसे बदलने के लिए angular-ui-bootstrap पक्ष से कोई विकल्प नहीं देखा है।

लेकिन सीएसएस के साथ वर्ग accordion-toggle साथ लंगर टैग से pointer-events अक्षम कर सकते हैं और अपने Toggle Me पाठ के लिए ईवेंट को पुनः सक्षम। यह थोड़ा मुश्किल है।

एक और चीज जो आप कोशिश कर सकते हैं templateCache को template/accordion/accordion-group.html के लिए संशोधित करना और इसे जिसकी आपको आवश्यकता है उसे स्टाइल करना है। यह शायद बेहतर है लेकिन मैंने अभी तक यह कोशिश नहीं की है।

कस्टम ओवरराइड बनाने के लिए रनटाइम के दौरान उस टेम्पलेट को बदलना संभव होना चाहिए। यदि नहीं, तो आप टेम्पलेट की स्रोत फ़ाइल को संशोधित कर सकते हैं और इसे अनुकूलित कर सकते हैं, लेकिन अगर आप इसे किसी भी तरह ओवरराइड कर सकते हैं तो मैं पहले कोशिश करता हूं।

वहाँ सीएसएस दृष्टिकोण के साथ कुछ अंक नहीं परिपूर्ण हैं और मुझे यकीन है कि उन्हें ठीक करने के लिए नहीं कर रहा हूँ:

1. टॉगल मुझे पूरे
2. सक्रिय शैली शीर्षक और लिंक से मँडरा जाएगा रेखांकित करेगा क्लिक करें क्लिक करने योग्य पाठ सक्रिय की अंडरलाइन रखें।

कृपया नीचे दिए गए डेमो पर या jsfiddle में देखें।

अद्यतन:

वहाँ angular-ui-bootstrap के मास्टर रेपो में आप accordion-group में template-url गुजारें सकता अपने कस्टम टेम्पलेट का उपयोग करने के लिए। यह एक बहुत ही नई प्रतिबद्धता है। See here। नवीनतम संस्करण 0.13.2 उस सुविधा के साथ-साथ है लेकिन आप टेम्पलेट को किसी भी तरह संशोधित कर सकते हैं लेकिन इतना सुविधाजनक नहीं है।

अब मैं टेम्पलेट दृष्टिकोण का उपयोग करूंगा क्योंकि यह क्लीनर है। यदि आपको स्कोप वैरिएबल के साथ टेम्पलेट के अंदर Toggle Me! टेक्स्ट को संशोधित करना है तो आपको शायद यह जांचने की आवश्यकता है कि क्या आप उस व्यवहार को जोड़ने के लिए accordion-group निर्देश को सजाने के लिए कर सकते हैं।

मैंने कस्टम accordion टेम्पलेट के साथ एक और jsfiddle बनाया है।

angular.module('demoApp', ['ui.bootstrap']) 
 
    .controller('mainController', MainController); 
 

 
function MainController($scope) { 
 
    var itemCount = 0; // just to have an increasing title 
 
    $scope.oneAtATime = true; 
 
    $scope.mileage = {}; 
 
    $scope.mileage.destionations = [{ 
 
     Type: '', 
 
     Reimbursable: "Yes", 
 
     Distance: true, 
 
     Odometer: false, 
 
     total: itemCount, 
 
     From: '', 
 
     To: '', 
 
     openState: true 
 
    }]; 
 
    $scope.addNewDestination = function() { 
 
     var index = $scope.mileage.destionations.length, 
 
      openState = (index == 1); 
 
     
 
     angular.forEach($scope.mileage.destionations, function(destination, index) { 
 
      // turn all of except second 
 
      destination.openState = (index == 1); 
 
     }); 
 
     
 
     itemCount++; 
 
     
 
     var newDestination = { 
 
      type: '', 
 
      reimbursable: "Yes", 
 
      Distance: true, 
 
      Odometer: false, 
 
      total: itemCount, 
 
      From: '', 
 
      To: '', 
 
      openState: openState 
 
     }; 
 
     
 
     
 
     $scope.mileage.destionations.push(newDestination); 
 
    } 
 
    $scope.status = { 
 
     isFirstOpen: true, 
 
     isFirstDisabled: false 
 
    }; 
 
}

.accordion-toggle { 
 
    display: inline-block; 
 
    /*cursor: default; 
 
    */ 
 
    pointer-events: none; 
 
} 
 
.accordionSubtitle { 
 
    display: inline-block; 
 
    /*cursor: default; 
 
    */ 
 
    pointer-events: auto; 
 
} 
 

 
.accordionSubtitle:hover{ 
 
    text-decoration: underline; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.2/ui-bootstrap.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.2/ui-bootstrap-tpls.js"></script> 
 
<div ng-app="demoApp" ng-controller="mainController"> 
 
    <accordion close-others="oneAtATime"> 
 
    <accordion-group is-open="destination.openState" ng-repeat="destination in mileage.destionations" is-disabled="false"> 
 
     <accordion-heading> 
 
      <span class="accordionSubtitle">toggle me </span> - {{destination.total}} this text is not clickable<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i> 
 
     </accordion-heading> 
 
     {{destination|json}} 
 
    </accordion-group> 
 
    </accordion> 
 
    <button ng-click="addNewDestination()">add</button> 
 
</div>

Answer 2

यह एक आसान ठीक है, तो एक घटना प्रचार और कैसे यह काम करने के लिए समझता है। आपको दो निर्देशों की आवश्यकता है। आइए उन्हें क्लिक करने योग्य और अनक्लिक करने योग्य कहें।

.directive('clickable', function() { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
      element.bind('click', function() { 
       //Do something here 
      }); 
     } 
    }; 
}); 

.directive('unClickable', function() { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
      element.bind('click', function (e) { 
        e.stopPropogation(); 
      }); 
     } 
    }; 
}); 

घटनाक्रम तत्व जिस पर वे प्रदर्शन या शुरू हो रहा है और फिर डोम के माध्यम से ऊपर की तरफ से प्रगति कर रहे हैं पर शुरू करते हैं। पहला निर्देश उसके क्लिक फ़ंक्शन में जो भी कार्य सौंपा गया है वह करेगा। दूसरा निर्देश किसी तत्व को उसके या उसके बच्चों पर होने वाले किसी भी क्लिक को निगलने का कारण बनता है, जब तक कि बच्चे के पास एक क्लिक ईवेंट न हो जिसे ईवेंट को माता-पिता को पास करने से पहले बुलाया जाता है।

Answer 3

@AWolf के जवाब में सुधार करने के लिए: आप भी एक में $ event.stopPropagation() उपयोग कर सकते हैं अकॉर्डियन-शीर्षक टैग में एनजी क्लिक स्थित है।

यह आपको आवश्यकतानुसार टेक्स्ट पर एक और ईवेंट असाइन करने की अनुमति देता है (यह मेरा मामला था - एक साधारण पाठ के बजाय "संपादन" आइकन जोड़ने के लिए)।

angular.module('demoApp', ['ui.bootstrap']) 
 
    .controller('mainController', MainController); 
 

 
function MainController($scope) { 
 
    var itemCount = 0; // just to have an increasing title 
 
    $scope.oneAtATime = true; 
 
    $scope.mileage = {}; 
 
    $scope.mileage.destionations = [{ 
 
     Type: '', 
 
     Reimbursable: "Yes", 
 
     Distance: true, 
 
     Odometer: false, 
 
     total: itemCount, 
 
     From: '', 
 
     To: '', 
 
     openState: true 
 
    }]; 
 
    $scope.addNewDestination = function() { 
 
     var index = $scope.mileage.destionations.length, 
 
      openState = (index == 1); 
 
     
 
     angular.forEach($scope.mileage.destionations, function(destination, index) { 
 
      // turn all of except second 
 
      destination.openState = (index == 1); 
 
     }); 
 
     
 
     itemCount++; 
 
     
 
     var newDestination = { 
 
      type: '', 
 
      reimbursable: "Yes", 
 
      Distance: true, 
 
      Odometer: false, 
 
      total: itemCount, 
 
      From: '', 
 
      To: '', 
 
      openState: openState 
 
     }; 
 
     
 
     
 
     $scope.mileage.destionations.push(newDestination); 
 
    } 
 
    $scope.status = { 
 
     isFirstOpen: true, 
 
     isFirstDisabled: false 
 
    }; 
 
}

.not_clickable:hover{ 
 
    cursor: default; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.2/ui-bootstrap.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.2/ui-bootstrap-tpls.js"></script> 
 
<div ng-app="demoApp" ng-controller="mainController"> 
 
    <accordion close-others="oneAtATime"> 
 
    <accordion-group is-open="destination.openState" ng-repeat="destination in mileage.destionations" is-disabled="false"> 
 
     <accordion-heading> 
 
      <span class="accordionSubtitle">toggle me</span> 
 
      <span ng-click="$event.stopPropagation()" class="not_clickable"> - {{destination.total}} this text is not clickable<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i> 
 
      </span> 
 
     </accordion-heading> 
 
     {{destination|json}} 
 
    </accordion-group> 
 
    </accordion> 
 
    <button ng-click="addNewDestination()">add</button> 
 
</div>