Angularjs standard way to bind custom kendo events on kendo grid

Question

I'd like to know if there's an angularjs best practice for binding kendo custom events.

I have a grid with a column menu that allows you to hide or show columns.

A kendo columnHide or columnShow event is fired whenever you check/uncheck to hide/show a column.

In my directive, I have the following code to capture that event. I'd like to know if this is the best way of binding these events and if there are any potential memory issues (e.g. is it necessary to unbind these events):

angular.module('sgComponents').directive('sgGrid', [

   link: function (scope, elm, attrs, ctrls) {

      kendoGrid = elm.data('kendoGrid'); // the grid

      kendoGrid.bind('columnHide', function () { 
         console.log('HIDE COLUMN');
      });

      kendoGrid.bind('columnShow', function () {
         console.log('SHOW COLUMN');
      });
   }
]);

Answer 1

Assuming that the kendo grid code removes your listeners when the grid is removed, you should be fine. If the kendo grid doesn't clean up after itself, you'd do something like:

scope.$on('$destroy', function() {
  kendoGrid.destroyOrWhateverItsCalled();
});

The $destroy event is triggered by Angular when your directive is removed from the view.

Answer 2

Judging from the (admittedly not much!) research I've done, here and on other sites, it seems there is no standard, recommended angularjs way of binding custom kendo events in particular (and custom events in general). The way I've done it above in the question using jQuery's bind() is the way that other people on stackoverflow have done it so I'm sticking with that.

For reference, similar questions have been asked here:

Event Bindings The AngularJS Way? ('I don't think there currently is an AngularJS way of doing this kind of event binding. Adding native support for all the missing events is somethings that's underway, as far as I know, but it's not released in any stable version yet.') [By missing events, he's referring to events that are not yet custom directives, e.g. ng-click, ng-blur]

Bind events on AngularJS element directives using jQuery

AngularJS: How to listen to DOM Events?

This dude has some info too but he uses jQuery on() instead of bind(), essentially the same thing but on() is more up to date (see - Best practice using BIND or ON functions in jQuery): element.on("myEvent",...)

Just as a side-note, for creating custom events that you define yourself and emit (or broadcast) and then handle with a callback, you can use $on(). See this excellent article for an example.