infinite-slider
infinite-slider copied to clipboard
gilbox
Event propogating? Keeps redirecting to home ('/') on click
The slider was working perfectly for months,but then I changed my directive a little and now it's redirecting to '/' whenever I click any of the cards. It's not even working for the old directive and old code. The drag and rest of the directive still works perfectly fine. Is there anything I can do to debug this? I've spent days trying to fix this.
UPDATE: It's somehow clicking the first link in my view - according to chrome event debugger
<div class="infinite-slider__wrap" ng-if="map.markersAreReady && !elmVisible">
<div infinite-slider-boundary class="infinite-slider-boundary infinite-slider-window">
<div infinite-slider disable-drag="false"
snap classify-closest
classify-snapped
closest-item-id="closestItemId"
is-jumping="isJumping"
snapped-item-id="map.selectedId"
class="infinite-slider-container">
<div infinite-slider-content class="infinite-slider-content">
<div ng-if="map.markersAreReady"
class="slide"
draggable="false"
ng-repeat="marker in map.markers | limitTo: map.markers.length track by marker.id" >
<div map-card size="thumb_"
item="marker.place"
selector="selectMarker(marker.id)"
class="card"
alt="marker.place.name">
</div>
</div>
</div>
</div>
</div>
</div>`
angular
.module('App')
.directive('mapCard',mapCard);
mapCard.$inject = ['$rootScope','shortAddressFilter','$timeout','PlaceService','$state','SavePlaceService','imageSizeFilter','UserService', 'PlacecService'];
function mapCard ($rootScope,shortAddressFilter,$timeout,PlaceService,$state, SavePlaceService, imageSizeFilter,UserService, ListService){
return {
'templateUrl': 'views/templates/map-item-card.html',
'restrict': 'AE',
'scope': {
'item': '=',
'index': '=',
'selectData': '=?',
'selector': '&?',
'size': '@'
},
link: function (scope, element) {
scope.event = 'clickEvent' + String(scope.item.id);
scope.user = UserService;
scope.card_image = imageSizeFilter(scope.item.hero_image_url,scope.size);
scope.toggleBB = function (item) {
scope.$evalAsync(function () {
SavePlaceService.toggle(item).then(function () {
});
});
};
scope.select = function () {
scope.selector ? scope.selector()(scope.selectData) : defaultSelect();
};
function showItem () {
PlaceService.item = scope.item;
$state.go('item', { id: scope.item.id, slug: scope.item.slug});
}
function defaultSelect() {
PlaceService.editMode ? PlaceService.selectItem(scope.item) : showItem();
}
}
};
}
Is there anything I can do to debug this?
I don't have any special wisdom to offer. If it's an href thing figure out why the href is wrong. If it's a javascript redirect, step through the code or add a debugger; statement.
how come it only happens with your directive? Maybe I can disable the propagation?
think I found it - line 177 - I added this and seems to have fixed the issue - if (event) { event.stopPropagation(); event.cancelBubble = true; }