Create dynamic directive in AngularJS

Question

I want that when I click an element within a directive call other directive with the detail of this element.

Actually when I click in an element the directive is called, but not display the information because the object I want to display in ((testimonialDetail)) directive is undefined in this scope

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

.

Is was looking for and I saw the $compile object may help but I don't know yet.

If you can help me I would appreciate.

Answer 1

something like this?

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
  } 

where directive is the html of your directive. I home it's useful for you!