0

I started a new site on foundation for apps which has ui-view element:

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

This element by default loads home.html which contains a list of posts' previews that is generated through 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>

When I click on an anchor tag with ui-sref='galelem', ui-view loads another html file with detailed information about the post:

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

When i click the 'a' element site load page with detailed information, but without information from angular such as {{galleryItem.tags}}. I want this html file with detailed information to get the data about the clicked post and display the same information that contains in preview. How can i do this? So far my js file contains only one object from which ng-repeat gets its data. I tried to look for answer but failed to find it as a am new to angularjs.

Roman Faizov
  • 1
  • 1
  • your router code would be useful to know what happens with the `galelem` state – Luca Aug 01 '16 at 13:18
  • @Luca I used foundation for apps and it allows to create ui-sref links through such information: --- name: galelem url: /galelem --- it also contains this information in app.js. I didn't wrote any routed code `config.$inject = ['$urlRouterProvider', '$locationProvider']; function config($urlProvider, $locationProvider) { $urlProvider.otherwise('/'); $locationProvider.html5Mode({ enabled:false, requireBase: false }); $locationProvider.hashPrefix('!'); }` – Roman Faizov Aug 01 '16 at 13:23
  • @RomanFaizov Are you saying this currently works, but on the details view, nothing is being bound? – Matt M Aug 01 '16 at 14:37
  • @MattyM Yes. Everything works fine on the details view except such elements as {{galleryItem.date}} and {{galleryItem.tags}}. They are not shown on the page and nothing is shown in the console. – Roman Faizov Aug 01 '16 at 15:01
  • @RomanFaizov You'll need to add some sort of identifier to the route then extract it in your details controller. See http://stackoverflow.com/questions/25647454/how-to-pass-parameters-using-ui-sref-in-ui-router-to-controller for an example. In your details controller, get the parameter value and retrieve that object from wherever your data is stored. I don't see how any of your routing is working since I don't see that route/state being handled in your config function (app.js). – Matt M Aug 01 '16 at 15:13

0 Answers0