Ion-item animation not triggered

#1

Hello,

When I click on the ion-item, the animation to the next page is not trigered, here is my code :

<ion-list>
	<ion-item ng-repeat="com in coms" class="item-thumbnail-right" nav-direction="forward" href="#/dash/{{com.id}}">
		<img class="item-image" ng-src="data:image/jpeg;base64,{{com.img1}}">
		<div class="item-category">{{com.category}}</div>
		<div class="item-title">{{com.title}}</div>
		<div class="com-item-bottom">
			<div class="com-comment positive">{{com.commentcount}}</div>
		</div>
	</ion-item>
</ion-list>

Can you help me ?

#2

Don’t forget to add nav-transition=“android” attribute.

Google it if you want to find out more.

#3

Still having the issue, what is strange is when I am doing like this the event is triggered :

<ion-list>
	<ion-item ng-repeat="com in coms" class="item-thumbnail-right">
		<a class="item-href" nav-direction="forward" href="#/dash/{{com.id}}">
			<img class="item-image" ng-src="data:image/jpeg;base64,{{com.img1}}">
			<div class="item-category">{{com.category}}</div>
			<div class="item-title">{{com.title}}</div>
			<div class="com-item-bottom">
				<div class="com-comment positive">{{com.commentcount}}</div>
			</div>
		</a>
	</ion-item>
</ion-list>

But I have to click on text or image to fire the href.

#4

Yay! Got the same problem here! After a lot of research I saw that the navDirection had to be on the anchor tag to work so I tweaked the base ionItem directive to get it to work.

It seems to work great but tell me if you have any issue.

Here is the code I wrote :

(function (angular) {
    angular.module('app')
        .directive('ionItem', ionItem);

    ionItem.$inject = ['$compile'];
    function ionItem($compile) {
        var directive = {
            priority: 1,
            restrict: 'E',
            link: link
        };

        return directive;

        function link($scope, $element, $attrs) {
            if ($attrs.navDirection) {
                var $ionContent = $element.find('.item-content');
                $ionContent.attr('nav-direction', $attrs.navDirection);
                $compile($ionContent)($scope);
            }
        }
    }
})(angular);