Ionic href not working

ionic-v1
1

Hi all,

My html page:

<ion-view view-title="Posts">
  <ion-content>
    <ion-list>
      <div class="list card" ng-repeat="post in posts" type="item-text-wrap">
        <div class="item item-avatar">
          <img ng-src="{{post.user_avatar}}">
          <h2>{{post.user_name}}</h2>
          <p>{{post.post_date}}</p>
        </div>
        
        <a href="#/posts/{{post.id}}"><div class="item item-image image-content">
        </p>1111111111<p>
        </div></a>
        
        <div class="item item-image">
          <a href="#/posts/{{post.id}}"><img ng-src="{{post.poll_img}}"></a>
        </div>
        
        <div class="poll-count">
        </p>{{post.poll_num}}<p>
        </div>
        
      </div>
    </ion-list>
  </ion-content>
</ion-view>

the app.js code:

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
  .state('posts', {
      url: '/posts',
          templateUrl: 'templates/posts.html',
          controller: 'PostsCtrl'
    })
    .state('posts.detail', {
      url: '/:pollId',
          templateUrl: 'templates/poll.html',
          controller: 'PostDetailCtrl'
    })

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/posts');

});

both of these are mostly borrowed from the tab sample. When I click the image, the ‘PostDetailCtrl’ doesn’t proceed. Why is that happened?

2

I didn’t test these codes, but I think you can try:
1.use “ng-href” instead of “href”, because angular expressions may not be explained in the “href” attributes.

2.use “ui-sref”, it is a directive provided by “ui-router” bundled already.

3.Use pure javascripts, put ng-click

<div ng-click="goto('posts.detail')"></div>

and define a jump method

$scope.goto=function(toState,params){ 
 $state.go(toState,params) //remember to inject $state to your controller
}

Hope this helps.

1 Like
3

I also didn’t test it, but I think if you want to use “ng-href” you have to change the link and the url of the state. Try <a ng-href="#/poll/{{post.id}}"> and change the url of the state post.detail to '/poll/:pollId'.

1 Like
4

thanks for windht and katand’s help. I modified the code to use ui-sref
a workable version, html:

    <a ui-sref="postdetail({ postID: post.id})"><div class="item item-image image-content">
    </p>1111111111<p>
    </div></a>

    <div class="item item-image">
      <a ui-sref="postdetail({ postID: post.id})"><img ng-src="{{post.poll_img}}"></a>
    </div>

app.js:

  .state('posts', {
      url: '/posts',
          templateUrl: 'templates/posts.html',
          controller: 'PostsCtrl'
    })
    .state('postdetail', {
      url: '/posts/:postID',
          templateUrl: 'templates/poll.html',
          controller: 'PostDetailCtrl'
    })