Insérez la directive par programme angulaire

Donc en gros, je veux être en mesure de déclencher un événement et ensuite une directive de compilation et d'insérer son auto à un poste dans les DOM.
Actuellement, j'ai quelque chose comme cela

//controller
  angular.module('app').controller('MainCtrl', function ($scope, $compile) {

    $scope.$on('insertItem',function(ev,attrs){
      var el = $compile( "<chart></chart>" )( $scope );
      $scope.insertHere = el;
    });

  });


//directive
 angular.module('app')
  .directive('chart', function () {
    return {
      template: '<div>My chart</div>',
      restrict: 'E',
      link: function postLink(scope, element, attrs) {
        element.text('this is a chart');
      }
    };
  });

Je suis capable de voir l'objet "el" avec tout ce que j'ai besoin mais je ne suis pas capable de l'insérer dans le DOM...
toute indices?

InformationsquelleAutor climboid | 2013-05-20
  1. 47

    Vous devez créer l'élément du dom d'abord, puis de le compiler et de l'ajouter au document. Quelque chose comme ceci:

    $scope.$on('insertItem',function(ev,attrs){
  var chart = angular.element(document.createElement('chart'));
  var el = $compile( chart )( $scope );

  //where do you want to place the new element?
  angular.element(document.body).append(chart);

  $scope.insertHere = el;
};

    J'ai créé un exemple simple ici: http://plnkr.co/edit/n7SZpyeQ9nbjVSYA7ibB?p=preview

    • Comment aurais-je accès $compile si j'ai de la création de l'élément en dehors du moment cinétique?
    • Bonjour, pourriez-vous nous donner des idées sur mon projet de nouvelle API pour faire ajouter par programme les directives d'un processus plus simple? github.com/angular/angular.js/issues/6950 Merci!
    • Elle a besoin pour compiler l'élément de référence à un champ d'action particulier (à l'intérieur angulaire). Il n'existe pas de directives à l'extérieur du angulaire. Les Directives sont liés à des étendues au sein de votre application. Alternativement, vous pouvez utiliser le jQLite à l'intérieur angulaire et de faire des gestionnaires d'événement de cette façon (angular.element('body')).
    • est-ce une pratique normale, ou contre l'angle de grain?
    • Il a certainement sent qu'il est contre la Angulaires façons, même si l'alternative n'est pas des plus joli. En gros, j'ai paresseusement déclenché ng-include en fonction d'un événement et laissez ng-include gérer la compilation et la liaison pour moi. Si quelqu'un est intéressé, je peux déterrer le code et l'ajouter comme une réponse.
    • hengije, veuillez le faire. Ce serait très utile.
    • Il n'est pas nécessaire pour déterminer les dépendances de la directive que vous êtes en train de créer, ni de les injecter. Exemple ici introduit une dépendance sur une usine 'f', mais je continue à utiliser @joakimbl du code qui, tout simplement, compile comme ça ` $compiler( graphique )( $champ );`
    • Il serait bien de mettre à jour la réponse avec le cas de la directive dispose de tous les attributs, qui doivent être fournis.
    • Quelqu'un aurait-il un exemple de $champ d'application.insertHere? J'essaie de la référence d'une variable comme ça et juste obtenir quelque chose le long des lignes de {context:"0"}. Je n'ai pas le code exact en face de moi.

    InformationsquelleAutor joakimbl