如何与ng-repeat成为ui-sref的朋友

时间:2016-08-01 13:13:05

标签: angularjs zurb-foundation

我在具有ui-view元素的应用程序的基础上开始了一个新站点:

<section id='gallery' ui-view>
</section>

此元素默认加载home.html,其中包含帖子列表&#39;通过ng-repeat生成的预览:

---
name: home
url: /
---

<div class="grid-block medium-up-4">
  <div class="grid-block vertical gallery-items" ng-repeat='galleryItem in galleryItems | filter: tag' ng-class="{ 'hidden': ! showDetails }">
    <div class="grid-block" ng-mouseover='hoverInfo = true' ng-mouseleave='hoverInfo = false'>
      <a ui-sref="galelem" class='gallery-element grid-block vertical'>
        <span class='preview'>{{galleryItem.tags | divideTags}}</span>
                <p>However beautiful the strategy, you should occasionally look at the results.</p>
        <div ng-show='hoverInfo' class='hover-info grid-block vertical'>
            <span class='on-hover'>{{galleryItem.tags | divideTags}}</span>
            <span class='view'>View Gallery</span>
        </div>
      </a>
    </div>
    <hr>
    <div class="grid-block">
      <div class="grid-block meta"><span>{{galleryItem.date}} &nbsp;/&nbsp;<span class='comments'> {{galleryItem.comments}} Comments</span></span></div>

      <div class="grid-block social-small ">
        <a href=""><i class='fa fa-envelope'></i></a>
        <a href=""><i class='fa fa-facebook'></i></a>
        <a href=""><i class='fa fa-twitter'></i></a>
      </div>        
    </div>
  </div>
</div>

当我点击带有ui-sref =&#39; galelem&#39;的锚标签时,ui-view会加载另一个html文件,其中包含有关帖子的详细信息:

---
name: galelem
url: /galelem
---
<div class="post-element grid-block vertical">
    <img src="http://placehold.it/1200x600" alt="" class='main-image'>
    <div class="grid-block vertical text-info">
        <span class='preview'>{{galleryItem.tags}}</span>
        <p>However beautiful the strategy, you should occasionally look at the results.</p>

        <div class="grid-block meta"><span>{{galleryItem.date}} &nbsp;/&nbsp;<span class='comments'> {{galleryItem.comments}} Comments</span></span></div>
            <div class="grid-block social-small ">
          <a href=""><i class='fa fa-envelope'></i></a>
          <a href=""><i class='fa fa-facebook'></i></a>
          <a href=""><i class='fa fa-twitter'></i></a>
        </div>   
        <hr>
        <a href="">previous post</a>
        <a href="">next post</a>     
        <span>Embeded Code</span>
        <pre class='embeded-code'>
            &lt;h3>VAGNER HERNANDEZ&lt;/h3>&lt;p class="imgC">&lt;a href="http://elpassion.com/post/97850349571">&lt;img src="http://38.media.tumblr.com/6fd0334606ad04b061abda2d462d3f2c/tumblr_nc2n0tAsmp1r46py4o1_1280.jpg" />&lt;/a>&lt;/p>
        </pre>
        <div class="feedback">
            <p><img src="http://placehold.it/25x25" alt=""><span>bj_unoxx </span>reblogged this from<span>constellation</span></p>
            <p><img src="http://placehold.it/25x25" alt=""><span>mike_dosxx</span>reblogged this from<span>constellation</span></p>
            <p><img src="http://placehold.it/25x25" alt=""><span>tre_leparc</span>submitted this to<span>constellation</span></p>
        </div>
    </div>
</div>

当我点击&#39; a&#39;元素网站加载页面包含详细信息,但没有角度信息,如{{galleryItem.tags}}。我想要这个带有详细信息的html文件来获取有关所点击帖子的数据,并显示预览中包含的相同信息。我怎样才能做到这一点?到目前为止,我的js文件只包含一个ng-repeat从中获取数据的对象。我试图寻找答案,但没有发现它是angularjs的新手。

0 个答案:

没有答案