Come aggiungere contenuto non modificabile nell'intestazione di fisarmonica bootstrap angolare?

Question

Il contenuto predefinito nell'intestazione della fisarmonica sarà tutto cliccabile per attivare la sezione, ma ora ho bisogno di aggiungere qualcos'altro nell'intestazione che non è cliccabile. Come può farlo?

<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

Questo non è facile da fare. Non ho visto nessuna opzione dal lato angular-ui-bootstrap per cambiare questo.

Ma con CSS è possibile disabilitare pointer-events dal tag di ancoraggio con classe accordion-toggle e riattivare gli eventi per il testo Toggle Me. È un po 'complicato.

Un'altra cosa che potresti provare è modificare templateCache per template/accordion/accordion-group.html e modificarlo in base alle tue esigenze. Probabilmente è meglio, ma non l'ho ancora provato.

Dovrebbe essere possibile modificare tale modello durante il runtime per eseguire l'override personalizzato. In caso contrario, potresti modificare il file sorgente del modello e adattarlo, ma prima dovrei provare se in qualche modo potresti sovrascriverlo.

Ci sono alcuni punti con l'approccio css non perfetto e io non sono sicuro di come risolverli:

1. Toggle me fai clic sottolineerà l'intera voce
2. stile attivo e in bilico dal collegamento sarà mantenere attiva la sottolineatura del testo non cliccabile.

Si prega di dare un'occhiata alla demo di seguito o in questo jsfiddle.

Aggiornamento:

Nel master repo di angular-ui-bootstrap ci si poteva passare template-url in accordion-group di utilizzare il modello personalizzato. È un impegno piuttosto nuovo. See here. L'ultima versione 0.13.2 non contiene questa funzione, ma è comunque possibile modificare il modello, ma non così conveniente.

Ora utilizzerei l'approccio modello perché è più pulito. Se è necessario modificare il testo Toggle Me! all'interno del modello con una variabile di ambito, è probabilmente necessario verificare se è possibile decorare la direttiva del gruppo accordion per aggiungere tale comportamento.

Ho creato un altro jsfiddle con il modello di fisarmonica personalizzato.

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

Si tratta di una soluzione semplice se si comprende propagazione degli eventi e come impiegarlo. Hai bisogno di due direttive. Chiamiamoli cliccabili e non cliccabili.

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

eventi di avvio sull'elemento su cui sono eseguiti o attivati ​​e poi progredire verso l'alto attraverso il DOM. La prima direttiva eseguirà qualsiasi compito assegnato nella sua funzione di clic. La seconda direttiva farà in modo che un elemento ingerisca qualsiasi clic su di esso o sui suoi figli, a meno che il bambino non abbia un evento click chiamato prima che l'evento passi al genitore.

Answer 3

Per migliorare risposta @AWolf s': è anche possibile utilizzare $ event.stopPropagation() in un ng-click trova nel tag fisarmonica-voce .

Ciò consente di assegnare un altro evento sul testo nel caso sia necessario (è stato il mio caso) per aggiungere un'icona "modifica" anziché un testo semplice).

vedi esempio qui aggiornate:

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>