Question

我正在使用Kendo UI的Angular网格。我试图将父控制器的函数传递给基于另一个Angular指令（作为处理程序）的模板。我有一个带控制器的组件，可以从服务中获取Kendo Grid选项。

(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);
    }

}
})();

以下是该服务中的选项（定义了Active的命令模板）：

(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
    };
}
})();

从上面的代码中，重点关注以下内容：

 {
                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>"
                    }
                ]
            },

正如您所看到的，我正在尝试将父控制器的vm.onActiveChange方法作为范围属性传递给ins-toggle。 ins-toggle的变更后范围属性设置为insOnChange: '&?'，适用于剑道网格之外的其他方案。

Kendo不允许我们将父函数作为模板的一部分传递给指令吗？

Answer 1

我发现它与Kendo无关，它实际上与我在UI-Bootstrap中使用的Toggle指令有关。对不起大家。

Kendo Grid Command将父控制器功能转换为基于指令的模板

1 个答案: