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
  }

其中directive是指令的html。我回家它对你有用！

在AngularJs中创建dinamic指令

1 个答案: