Créer une directive dinamic dans AngularJs

Question

Je veux que lorsque je clique sur un élément dans une directive, appelle une autre directive avec le détail de cet élément.

En fait, lorsque je clique dans un élément de la directive est appelée, mais pas afficher les informations parce que l'objet que je veux afficher dans ((testimonialDetail)) directive n'est pas défini dans ce champ

(function (app) { 
 
    app.directive("testimonial", function() { 
 
     return { 
 
      restric: "E", 
 
      scope: { 
 
       info: '=' 
 
      }, 
 
      controller: function ($scope, $http) {     
 
       $scope.index = 0; 
 
       $scope.showDetail = false; 
 
       var quantity = 3; 
 
       var information = 0; 
 
       $http.get("/Testimonio/getTestimonials/").success(function (data) { 
 
        $scope.testimonials = data.data; 
 
        information = data.data.length; //When get all the data, fideout the preload gif 
 
        $(".se-pre-con").fadeOut("slow");     
 
       }); 
 
       //Limit of item to show 
 
       $scope.quantity = 3; 
 
       $scope.setTestimonial = function (value) { 
 
        quantity += value; 
 
        if (value == 0) { 
 
         quantity = 3; 
 
         window.location.hash = "testimonials"; 
 
        } 
 
        $scope.quantity = quantity; 
 
       } 
 
       //Verify is there are more testimonials to show 
 
       $scope.isMoreTestimonial = function() { 
 
        return information > quantity; 
 
       } 
 
       $scope.viewTestimonialDetail = function (info) { 
 
        $scope.testimonialDetail = info; //Here is the problem.. this object is not setting up in the html. 
 
        $scope.showDetail = true; 
 
       };    
 
      }, 
 
      templateUrl: 'App/Directives/Views/testimonials.html',   
 
     } 
 
    }); 
 
}(angular.module("Application")));

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script> 
 

 
<section class="our-services slideanim" id="testimonials"> 
 
    <div ng-hide="showDetail"> 
 
     <h3 class="text-center slideanim">Testimonios</h3> 
 
     <div ng-repeat="testimony in testimonials | limitTo : quantity"> 
 
      <div class="wrapper testimonials" ng-click="viewTestimonialDetail(testimony)"> 
 
       <div class="card radius shadowDepth1"> 
 
        <div class="card__image border-tlr-radius"> 
 
         <img ng-src="../../../Imagenes/{{testimony.Photo1}}" ng-click="changeView('testimonial-detail')"> 
 
        </div> 
 
        <div class="card__content card__padding"> 
 
         <div class="card__meta"> 
 
          <a href="#"></a> 
 
          <time>{{testimony.Date | date}}</time> 
 
         </div> 
 
         <article class="card__article"> 
 
          <h2><a href="#">{{testimony.Title}}</a></h2> 
 
          <p>{{testimony.Description | showShortString : 220}}</p> 
 
         </article> 
 
        </div> 
 
        <div class="card__action"> 
 
         <div class="card__author"> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="clear"></div> 
 
     <div class="load" ng-show="isMoreTestimonial()" ng-click="setTestimonial(3)"> 
 
      <center><h4>Ver mas.</h4></center> 
 
     </div> 
 

 
     <div class="load" ng-show="!isMoreTestimonial()" ng-click="setTestimonial(0)"> 
 
      <center><h4>Ver menos.</h4></center> 
 
     </div> 
 
    </div> 
 
    <testimonial-detail detail="testimonialDetail" ng-show="showDetail"></testimonial-detail> <!--HERE --> 
 
</section>

.

Est-ce que je cherchais et j'ai vu l'objet compiler $ peut aider mais je ne sais pas encore.

Si vous pouvez m'aider, j'apprécierais.

Answer 1

quelque chose comme ça?

var addElement = function(directive,scope){ 
    var element = $compile(directive)(scope); // compile the new element 
    angular.element(document.getElementById('my-id')).after(element); // add html to the dom 
    } 

où directive est le code html de votre directive. Je suis à la maison c'est utile pour vous!