Kendo Grid Command parent controller function into directive-based template

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 #'>&nbsp;<span class='k-icon k-edit'></span>&nbsp;</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.