Question

我有一个包含产品列表的页面。我的指令是li，当我点击一个链接时它就在li里面，并在li里面编译了一个模板并显示我的模板。

我做的是当我点击产品时..显示我的模板，如果我点击另一个产品，我想要隐藏上一个模板，并在我点击的产品中显示模板而不知道我是怎么做的可以用角度来做到这一点。

我的指示示例：

(function (){

  "use strict";

  var app = angular.module('quickPreview');

  app.directive('previewProduct', function ($compile,$templateCache) {

      return {
        restrict: 'A',
        transclude: false,
        templateNamespace: 'html',
        scope: true,
        link: function(scope, element, attrs) {
          element.find('.sd-click-preview').bind('click', function (){


                var preview = angular.element($templateCache.get('quickpreview.html'));
                var cpreview = $compile(preview);

                element.find('.content-preview').html('');

                element.append(preview);

                cpreview(scope);

                element.addClass('view-expanded');
                $('body,html').animate({
                  scrollTop: element.offset().top
                }, "fast");
          });

        }
    };

  });

}(window, window.angular));

在li

中编译的模板示例

<script type="text/ng-template" id="quickpreview.html">
  <div class="content-preview">
    <div class="content-preview-inner">
        <span class="full-preview"></span>
        <span class="close-preview"></span>
        <div class="block block-left left">
          <div class="content-tabs">
            <div class="tabs-content vertical">
              <div class="content active" id="panel1">
                <div class="content-img">
                  <div class="main-img">
                    <img ng-src="{{product.mainImage}}" alt="">
                  </div>
                  <div class="thumbnails">
                    <a class="th" role="button" aria-label="Thumbnail" href="">
                      <img aria-hidden=true src=""/>
                    </a>
                  </div>
                </div>
                <div class="details">
                   <h3 class="title-product">{{product.brand}}</h3>
                   <p class="title-desc">{{product.descriptionExcerpt}}</p>
                   <p class="block-price">{{product.price}} <small>{{product.priceBefore}}</small><small>({{product.priceDiscount}})</small></p>
                </div>
              </div>
            </div>
          </div>
        </div>
    </div>
  </div>
</script>

在这里我编译我的模板

<li ng-init='product = {id: "<%=product.id%>", brand: "<%=product.name_short%>", descriptionExcerpt: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas laudantium commodi veniam incidunt, fugit molestias voluptatibus sint facere sapiente temporibus quidem, sequi deleniti saepe, atque obcaecati dicta, assumenda nisi a!", price: "£103", priceBefore: "£123", priceDiscount: "Save 10%", mainImage: "<%=raw(main_image.url(:huge))%>", masterVariant: {id: "<%=product.master.id%>"}, variants: [{id: "0", name: "Lorem ipsum", price: "£123", available: true }, {id: "1", name: "Lorem ipsum", price: "£13", available: false }]}' preview-product>

<!-- Here I compile my template -->

</li>

我希望有人能指导我。

在AngularJS中控制器之间共享数据（PubSub /事件总线示例）

0 个答案: