Hi again,
I found the solution by my self! ;-)
Here ist my HTML:
<ion-scroll zooming="true" direction="y" class="historyTableScroll"
has-bouncing="true">
<div id="item_{{playlist.id}}" class="singleItem repeat-animation"
ng-repeat="playlist in playlists track by playlist.id"
ng-class="{'new': playlist.status == 'new' }"
* comes-to-view array-item="playlist" item-seen="itemSeen(playlist)"*>
<h1>({{$index}}) {{playlist.id}}. {{playlist.title}}</h1>
</div>
</ion-scroll>
My super Directive:
app.directive('comesToView', function () {
return{
restrict: 'A',
scope:{
arrayItem: "=",
itemSeen: '&'
},
link: function (scope, element,$rootScope) {
var $page = angular.element(document.querySelector('ion-scroll'));
var $el = element[0];
var offset = $el.clientHeight;
var fired = false;
if (scope.arrayItem.status == 'new') {
$page.bind('scroll', function () {
var windowScrollTop = $page[0].getBoundingClientRect().top ;
var windowScrollBottom = $page[0].getBoundingClientRect().bottom ;
var elScrollTop = $el.getBoundingClientRect().top + offset;
if (elScrollTop < windowScrollBottom && elScrollTop > windowScrollTop && !
fired) {
//Element visible
fired = true; //fire this only one time!
console.log('VISIBLE');
scope.itemSeen(); //call function in controller!
}
else {
//console.log('INVISIBLE');
}
})
} // IF Ende
} //link ENDE
} //return ENDE
});
Function in controller:
$scope.itemSeen = function(challenge){
console.log('YEAAAAH! ' + challenge.status);
// do what ever you want to do!
}
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
