Kendo Grid Command parent controller function into directive-based template - angularjs

Question

I am using Kendo UI's Angular grid. I am trying to pass a parent controller's function to a template that is based on another Angular directive (as a handler). I have a component with a controller that grabs the Kendo Grid options from a service.
(function () {
'use strict';
angular.module('ins.admin.userreg')
.component('insUserRegGrid', {
templateUrl: 'admin/user-registration/grid/user-reg-grid.tpl.html',
controllerAs: 'vm',
controller: controller
});
controller.$inject = ['insUserRegGridSvc', 'insUserRegRouteSvc', '$timeout'];
function controller(insUserRegGridSvc, insUserRegRouteSvc, $timeout) {
var vm = this;
vm.options = insUserRegGridSvc.getOptions();
vm.goToCreate = insUserRegRouteSvc.goToCreate;
vm.onActiveChange = function(value) {
console.log('changed' + value);
}
}
})();
Here are the options within that service (where the command template for Active is defined):
(function () {
'use strict';
angular.module('ins.admin.userreg')
.factory('insUserRegGridSvc', insUserRegGridSvc);
insUserRegGridSvc.$inject = ['_', 'insUserRegResrc', 'insFormatUtil', 'insAppSettingsSvc'];
function insUserRegGridSvc(_, insUserRegResrc, insFormatUtil, insAppSettingsSvc) {
function getOptions() {
return {
dataSource: {
transport: {
read: function (e) {
insUserRegResrc.getUsersWithRoles().$promise.then(function (response) {
response.map(function (i) {
i.UserID = i.UserId;
i.Url = insAppSettingsSvc.apiRoot + 'UserRegistration/Post/' + i.UserId;
i.FirstName = i.FirstName;
i.MiddleName = i.MiddleName;
i.LastName = i.LastName;
if (i.Role[0]) {
i.RoleName = i.Role[0].RoleName;
} else {
i.RoleName = "";
}
if (i.Reports[0]) {
i.Manager = i.Reports[0].FullName;
} else {
i.Manager = "";
}
i.Email = i.Email;
i.Active = i.IsActive;
});
response = _.orderBy(response, ['UserId'], ['asc']);
e.success(response);
});
}
},
pageSize: 10
},
resizable: true,
pageable: true,
editable: false,
sortable: true,
toolbar: "<a ng-click='vm.goToCreate()' class='btn ins-btn-update k-grid-add pull-left' title='Add New'>add</a>",
columns: [
{ title: 'User Id', field: 'UserID', sortable: true, width: 150 },
{ title: 'First Name', field: 'FirstName', sortable: true, width: 150 },
{ title: 'Last Name', field: 'LastName', sortable: true, width: 150 },
{ title: 'Role', field: 'RoleName', sortable: true, width: 150 },
{ title: 'Manager', field: 'Manager', sortable: true, width: 150 },
{ title: 'Email', field: 'Email', sortable: true, width: 150 },
{
title: 'Active',
width: 85,
command: [
{
name: "Toggle Active",
template: "<ins-toggle ins-id='activeToggle' ins-model='dataItem.Active' ins-on-change='vm.onActiveChange' ins-on-text='yes' ins-off-text='no' ins-enabled='true'></ins-toggle>"
}
]
},
{
width: 85,
command: [
{ name: "Edit", template: "<a class='k-button k-button-icontext k-grid-edit' data-toggle='tooltip' ui-sref='.edit({ userId: {{dataItem.UserID}}})' title='#: name #'> <span class='k-icon k-edit'></span> </a>" }
]
}
]
}
}
return {
getOptions: getOptions
};
}
})();
From the above code, focus on the following:
{
title: 'Active',
width: 85,
command: [
{
name: "Toggle Active",
template: "<ins-toggle ins-id='activeToggle' ins-model='dataItem.Active' ins-on-change='vm.onActiveChange' ins-on-text='yes' ins-off-text='no' ins-enabled='true'></ins-toggle>"
}
]
},
As you can see I am trying to pass the parent controller's vm.onActiveChange method as a scope attribute to ins-toggle. ins-toggle's ins-on-change scope attribute is setup as insOnChange: '&?' and works in other scenarios outside of Kendo's grid.
Does Kendo not allow for us to pass parent functions into directive's as a part of a template?

Answer 1

I have found out that it has nothing to do with Kendo, and it actually had to do with the Toggle directive I was using from UI-Bootstrap. Sorry everyone.