twinssbc/Ionic-Calendar

month detail view customization. ng-click event not working

Opened this issue · 5 comments

Hi, i am customizing view like this

$scope.monthviewEventDetailTemplateUrl = 'templates/event-details.html';

Next i am customizing view by adding edit and delete controls when user views the details of event.

<tr ng-repeat="event in selectedDate.events">
	<td class="event-detail">
		{{::event.title}}
	</td>
	<td><i class="icon ion-ios-pencil-outline" ng-click="alert('hello')">Edit Event</i></td>
	<td><i class="icon ion-ios-trash-outline" ng-click="DeleteEvent(event)">Delete Event</i></td>
</tr>

Neither DeleteEvent nor alert is working. What can i do now?

@raheelshan Yes, it will try to look for method bind to the current scope, which is the internal scope in the calendar. So it can't call a method defined in your scope. As a workaround, you could add some method to your event object.

i tried adding methods but it still fails.

@raheelshan Could you show me how do you add the method, and what's the error message?

For testing i added these into directive scope to see if it works

eventDeleted: '&',
eventEdited: '&',

Then in

event-deleted="onEventDeleted(event)" event-edited="onEventEdited(event)" 

And added these two methods in controller

$scope.onEventEdited = function (event) {
    console.log('Event selected:' + event.startTime + '-' + event.endTime + ',' + event.title);
};

$scope.onEventDeleted = function (event) {
    console.log('Event selected:' + event.startTime + '-' + event.endTime + ',' + event.title);
};

It doesn't seem to work as it works for event-selected.
The alternate way i found to work is to create a directive and achieved this.

@raheelshan Do you mean you were trying to modify the source code but it didn't work?