Comment transclude contenu dans ui bootstrap modal de la directive

J'ai fait une coutume de la directive sur le dessus de ui bootstrap modal de la directive, de sorte que je peux utiliser le même modèle modal partout dans mon application.

Mon directive fonctionne jusqu'à ce que j'essaie de transclude son contenu dans le modèle :

http://plnkr.co/edit/YPESA3?p=preview

(Commentaires transclude propriété de la directive et le modèle et vous verrez que vous obtenez une erreur TypeError: undefined n'est pas une fonction)

Je ne peux pas comprendre ce que je fais mal

InformationsquelleAutor Florian F | 2013-03-07
  1. 6

    OP, votre extrait de code est exactement ce que je cherchais à faire—merci!

    J'ai réussi à obtenir votre plunk de travail en passant replace:true ainsi que transclude: true

    Voici la mise à jour de plunk http://plnkr.co/edit/gxCS2V?p=preview

    Je suis nouveau sur Angulaire, donc j'étais intéressé de savoir pourquoi:

    remplacez - si défini à true, alors le modèle va remplacer l'élément en cours, plutôt que d'ajouter le modèle de l'élément.

    (par l'intermédiaire de l'angle de docs)

    Qui, bien sûr, de sens une fois que vous connaissez.

    Bon à savoir si vous voulez faire de votre directive, en particulier recyclables. Les auxiliaires modaux sont assez parfait exemple.

    Connexes : interface utilisateur-bootstrap vaut la peine de vérifier.

    InformationsquelleAutor couzzi
  2. 3

    Cochez cette solution, vous n'avez pas besoin d'un contrôleur supplémentaire ou angular-ui pour que seulement passer un simple gestionnaire et l'utiliser

    example.js

    angular.module('plunker', [], function() {

})

.directive('modal', function() {
  return {
    restrict : 'E',
    templateUrl: 'myTpl.html',
    transclude: true,
    controller: function($scope) {
      //you need get a better unique generator
      $scope.modal_id = 'modal_' + Math.floor((Math.random()*100+1));
      $scope.handler = $scope.modal_id;
    },
    scope : {
      handler : '='
    }
  };
})
.run();

    index.html

    <!doctype html>
<html ng-app="plunker">
  <head>    
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">    
  </head>
<body>

<div ng-init="handler = null">  
  <modal handler="handler">
    <h1>Content</h1>
  </modal>  
  <a href="#{{handler}}" role="button" class="btn primary" data-toggle="modal">Open me</a>
</div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>    
    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
    <script src="example.js"></script>
</body>
</html>

    myTpl.html

    <div id="{{modal_id}}" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="{{modal_id}}Label" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 id="{{modal_id}}Label">I'm a modal!</h4>
    </div>
    <div class="modal-body">
      <div ng-transclude></div>
    </div>    
    <div class="modal-footer">
      <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
    </div>
</div>

    regardez comment fonctionne dans plunker

    • Merci pour votre réponse. Je vais avoir un essai. Cependant, pour être honnête, , je suis plus interessé de savoir ce qui est faux dans mon exemple
    • J'ai décidé de faire une solution qui n'utilise pas angulaire de l'interface utilisateur par une mauvaise expérience car angular-ui m'a donné plus de problèmes que de solutions. mais regardez attentivement la modale de la directive de angular-ui
    InformationsquelleAutor rkmax