7
votes

Comment ajouter du contenu neckable dans l'en-tête d'accordéon bootstrap angulaire?

Le contenu par défaut dans l'en-tête d'accordéon sera tout cliquable pour basculer la section, mais je dois maintenant ajouter quelque chose d'autre dans l'en-tête qui n'est pas cliquable. Comment peut-on faire ça? XXX

angularjs angular-ui-bootstrap

0 commentaires

3 Réponses :

3
votes

Ce n'est pas facile à dire. Je n'ai vu aucune option de angular-ui-bootstrap code> côté pour changer ceci.

mais avec CSS, vous pouvez désactiver le POINTER-EVENES CODE> de la balise d'ancrage avec classe Accordéon-baisse code> et Réactivez les événements pour votre Basculer moi CODE> Texte. C'est un peu difficile. P>

Une autre chose que vous pouvez essayer est de modifier le code> templateCache code> pour modèle / accordéon / accordéon-group.html code> et style et style vous en avez besoin. C'est probablement mieux mais je n'ai pas encore essayé cela. P>

Il devrait être possible de modifier ce modèle pendant l'exécution pour effectuer une substitution personnalisée. Sinon, vous pouvez modifier le fichier source du modèle et l'adapter, mais je voudrais d'abord essayer si vous pouviez le remplacer d'une manière ou d'une autre. P>

Il y a quelques points avec l'approche CSS non parfaite et je ne sais pas comment Pour les réparer: p>


 Boggle ME CLIC SOULIND SOULIND TOUT LE TÊTE  LI>
 Le style actif et le vol stationnaire de la liaison conserve la slimle du texte non cliquable actif.  li>
 ol>  Veuillez consulter la démo ci-dessous ou dans cette  jsfiddle .  p> 
  update  strong>:  p> 
 dans le dépôt principal de  angulaire-ui-bootstrap  code> là, vous pouvez passer  template-url  Code> dans  Accordion-Group  Code> Pour utiliser votre modèle personnalisé. C'est un joli nouveau commit.  voir ici .
La dernière version  0.13.2  code> est avec cette fonctionnalité, mais vous pouvez modifier le modèle quand même mais pas si pratique.  P> 
 Je voudrais maintenant utiliser l'approche du modèle car il est plus propre. Si vous devez modifier le  Basculer moi!  Code> Texte à l'intérieur du modèle avec une variable d'étendue Vous devez probablement vérifier si vous pouvez décorer la directive du groupe accordéon pour ajouter ce comportement.  P> 
 J'ai créé un autre  jsfiddle  avec le modèle d'accordéon personnalisé.  P> 
  P> 


<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>

0 commentaires

0
votes

Ceci est une solution facile si on comprend la propagation des événements et comment l'employer. Vous avez besoin de deux directives. Appelons-les cliquables et blanchissons.

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

2 commentaires

C'est une bonne idée. Juste le style est un peu problématique. Regardez ce Fiddle . Je ne pouvais pas supprimer le soulignement sur la survol de la directive non cliquée par . Donc, je pense que le meilleur est de travailler avec le modèle personnalisé.

Je ne peux pas regarder le violon sur mon téléphone, mais vous pourriez supprimer la classe sur le planant ou intercepter le vol stationnaire à l'intérieur de la directive décolletée.

0
votes

Améliorer @awolf Strong> La réponse: Vous pouvez également utiliser $ Event.StopPropagation () STORT> dans un clic NG situé dans la Accordion-Heading tag.

Ceci vous permet d'attribuer un autre événement sur le texte au cas où vous en auriez besoin (c'était mon cas - ajouter une icône "Modifier" au lieu d'un texte simple). P>

Voir Exemple mis à jour ici: P>

<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>

0 commentaires