Open meduar opened 9 years ago
Did you figure out how to add an icon?
I m also trying to do something similar
I managed to add the button, by using: element.append( yourCustomService.CustomFunction(event) );
Example:
$scope.eventRender = function (event, element, view) {
element.append(calendarEventService.formatWeekEvent(event));
$compile(element)($scope);
}
The service for this example looks like this (adding in $filter just for show):
app.service('calendarEventService', ['$filter', function ($filter) {
this.formatWeekEvent = function (event) {
return '<div> event.title </div> <button>little close button</button>';
}
}]);
The problem I have with this, though, is how to attach an actual event for this button. Because, while ng-click does work, it doesn't seem to pass in the event.
Example for this:
app.service('calendarEventService', ['$filter', function ($filter) {
this.formatWeekEvent = function (event) {
return '<div> event.title </div> <button ng-click="myDeleteFunction(event)">little close button</button>';
}
}]);
When myDeleteFunction is triggered (which it is) the event is passed in as undefined. If someone can shed a light on this, that would be GREAT
Managed to workaround the issue by binding a click event to the event render, as follows:
In the html:
app.service('calendarEventService', ['$filter', function ($filter) {
this.formatWeekEvent = function (event) { return '<div> event.title </div> <button class="deleteActivity">delete</button>'; }
}]);
In the event render function:
$scope.eventRender = function (event, element, view) { element.append(calendarEventService.formatWeekEvent(event)); element.find(".deleteActivity").bind('click', function () { $scope.deleteActivity(event); return false; }); $compile(element)($scope); }
I know this is an old post, I also tried to add an icon into the rendered event. I found the same problem - that the objects were undefined to the ng-click function call. As a solution I json encoded my object as follows: ng-click='openReference(" + JSON.stringify(reference) + ", $event)'. see Below
$scope.openReference = function(Reference, Event){
Event.stopPropagation();
....
}
$scope.eventRender = function(event, element, view){
var template = "<div layout='row' class='align-items-center justify-content-between'>" +
event.title + "<div class='m-2 align-items-center' layout='row'>";
angular.forEach(event.References, function(reference){
template+="<span ng-click='openReference(" + JSON.stringify(reference) + ", $event)'>"
if(reference.Type=="Quote"){
template += "<img height='20px' width='20px' src='images/svg/location.svg'>";
}else if (reference.Type=='Contact'){
template += "<img height='20px' width='20px' src='images/svg/person.svg'>";
}
template+="<md-tooltip>" + reference.Label + "</md-tooltip></span>";
})
template += "</div></div>";
compiled = $compile(template)($scope);
element.html(compiled);
//}
}
I am trying to do a functionality to put an icon for deleting an item...
Someone who can give me some advice?