1

I have a list of items where ideally, upon clicking the item, would bring me to the post itself. I dont know how to have that..I tried ng-click within the header but i think the route itself isnt working.

For testing purposes, I have used a line where the work VIEW, upon clicking should lead to the function above. My suspect is the problem lies with the app.js states and how I define it in the $state.go.

Appreciate any help. Many thanks!

The main list html

<ion-view ng-controller="NavCtrl"> 
    <div class="container posts-page">
          <div class="post row" ng-repeat="(postId, post) in posts">

    <a ng-click="view()">VIEW</a> <!-- the VIEW when clicked = no actions -->


The js file using 'tab.view' doesnt work.

    $scope.view = function() {
      $state.go('tab.posts.view', {postId: postId});
    };


The app.js state file

.state('tab.posts', {
  url: '/posts',
  views: {
    'tab-posts': {
      templateUrl: 'templates/tab-posts.html',
      controller: 'PostsCtrl'

.state('tab.posts.view', {
  url: '/:postId',
  views: {
    'tab-posts':{
      templateUrl: 'templates/tab-showpost.html',
      controller: 'PostViewCtrl'
Thinkerer
  • 1,606
  • 6
  • 23
  • 43

1 Answers1

1

There is a working plunker, showing HOW TO:

.state('tab.posts', {
  url: '/posts',
  views: {
    'tab-posts': {
      templateUrl: 'tab-posts.html',
      controller: 'PostsCtrl'
    },
  }
})
.state('tab.posts.view', {
  url: '/:postId',
  views: {
    // here is the issue, instead of this
    // 'tab-posts':{
    // we have to use this
    'tab-posts@tab':{
      templateUrl: 'tab-showpost.html',
      controller: 'PostViewCtrl'
    }

as the code example shows, the problem is, that we have to use the absolute view naming:

Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname@statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.

So, because we want to target the view of the state tab named tab-posts we have to use absolute naming: 'tab-posts@tab'

Also, we should pass the postId into the view() function, or we can directly use the ui-sref

<a ng-click="view(postId)">VIEW</a>
<a ui-sref="tab.posts.view({postId: postId})">VIEW</a>

For completeness, there is update view func, taking the post id:

$scope.view = function(postId) {
    $state.go('tab.posts.view', {postId: postId});
};

All that could be observed here

Radim Köhler
  • 122,561
  • 47
  • 239
  • 335
  • Thanks @Radim, 2 questions. Why the previous clicking to bring up input page doesnt require @ while this does? Secondly, the html displaying the particular post isnt working, it uses the same code as previous but i think it should use postId -> {{ post.title }}>. Should I change it to ui-sref or add /:postId? – Thinkerer Sep 01 '14 at 16:07
  • Could you, please, read this my answer: http://stackoverflow.com/questions/24745908/ ? There I explain in detail how the absolute naming with `@` works – Radim Köhler Sep 01 '14 at 16:24
  • Also, I updated the plunker: http://plnkr.co/edit/nr666Xw9NmmcrizMPcaJ?p=preview *(there was missing "return" inside of `Posts.find()` service)* Does it help? is is more clear what is happening behind? – Radim Köhler Sep 01 '14 at 16:34
  • NO. The difference is WHERE is the anchor/target **`ui-view="tab-posts"`** placed. it is in a state 'tab', which is parent of a `'tab.posts'` - and for parent we can omit that syntax. But `'tab.posts.view'` does not have parent tab - it mast target that view with full syntax... Sorry I cannot explain it better. – Radim Köhler Sep 02 '14 at 15:43
  • I think im slowly getting it. Basically uses same view so to replace whatevers in the space. Sorry, took me a while as ionic doesnt have ui-view. Just wondering that it ought to work as well for clicking to view post on a new page, without the view@state. I thought'tab.posts.view' 's parent would be 'tab'? And since 'tab' state is abstract, it will appear on all pages, should it be 'tab-posts@tab.posts'? – Thinkerer Sep 02 '14 at 16:24
  • My answer would be: if the view 'tab-posts' is inside of some template of the state 'tab.posts' then YES: we can target it as `'tab-posts@tab.posts'`. To make it more clear: each view could be defined as `viewName@state` - any view in state definition. But to make it easier for us, develepoers, ui-router provides shortcut for `viewName@parentState` to be just `viewName`. It is really very very straightforward... enjoy ui-router – Radim Köhler Sep 02 '14 at 17:11
  • thanks @Radimkohler very helpful. I checked the Plunker again. When I click, it goes to next page. But {{ post.title }} gives me just () instead of the full post. It works in Plunker but not in my local machine...any idea why? I tried postId.url and postId.title but its not working either. – Thinkerer Sep 06 '14 at 16:56
  • If it is working in a plunker, it means, there would be some different relative pathes (e.g. templateUrl from "tpl.some.html" in plunker, must be "views/some.html")... this is most often issue. Glad to see that you've made it. The `ui-router` is simply the best architecture I've seen around the angularjs ... good luck – Radim Köhler Sep 06 '14 at 16:59
  • I saw in plunker u have `.state('tab.posts.view'` and `.state('tab.view'`. is the `tab.view` necessary for it to work? thats the only difference i see with my code vs plunker's. – Thinkerer Sep 06 '14 at 17:11
  • ;) What should I say? ;) These states are there for a reason. But if you do not like it, adjust it. Really not sure what should I say ;) – Radim Köhler Sep 06 '14 at 17:18
  • Hi Radim, do you have a chat or email I can reach you at? Thanks. – Thinkerer Sep 07 '14 at 04:49
  • My playground is SO. If you have a question ask here. Discuss any issue you have. Many will try to help you. In case my answers do help as well, I will gladly assist again and again... If not, many other smarter will do – Radim Köhler Sep 07 '14 at 05:28