Создайте динамическую директиву в AngularJs

Question

Я хочу, чтобы при щелчке элемента внутри директивы вызывала другую директиву с деталью этого элемента.

На самом деле, когда я нажимаю в элементе директива называется, но не отображать информацию, так как объект, который я хочу, чтобы отобразить в ((testimonialDetail)) директива не определена в этой области

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

.

Я искал, и я увидел объект $ compile, который может помочь, но я пока не знаю.

Если вы можете мне помочь, я был бы признателен.

Answer 1

что-то вроде этого?

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 
    } 

где директива является html вашей директивы. Я доволен своим домом!