为 Kendo UI Grid 详细模板使用 Angular 模板

Question

我正在为 Angular JS 使用 Kendo UI 包。我想为行详细信息使用 Angular 模板，与此处所做的非常相似：

Kendo Grid Detail Template

本质上，我想在扩展细节时获取一些数据，并将角度模型传递给模板。这可能吗？

Answer 1

我（到目前为止）出于同样的需要所做的是使用 Grid 上的 changed 事件在我的控制器中的 $scope 上填充一个“SelectedRow”对象。对于 DetailTemplate，我有一个 div，其中包含一个指令，该指令从 $templateCache 或使用 $http 加载模板并对其进行编译并将其链接到 $scope。模板的问题之一是编译并将它们链接到 $scope 以及发生的时间。 （我的问题更严重，因为我需要为每一行使用不同的详细信息模板）

                $scope.vm.options.productGridOptions = {
                dataSource: new kendo.data.DataSource({
                    data: $scope.vm.solution.Products,
                    pageSize: 10
                }),
                change: $scope.vm.events.productSelected,
                columns: $scope.vm.columns.productColumns,
                detailTemplate: '<div data-template-detail type="#= EntityTemplateSK #"></div>',
                filterable: false,
                groupable: false,
                pageable: true,
                reorderable: true,
                resizable: true,
                selectable: 'single',
                sortable: true
            };

 myApp.directive('templateDetail', ['$compile', '$http', '$templateCache', 
        function ($compile, $http, $templateCache) {
            var detailTemplateNumbers = ['21', '22', '23', '26', '45', '69'];
            var getTemplate = function (templateNumber) {
                var baseUrl = '/App/Product/Views/',
                    templateName = 'productdetail.html',
                    templateUrl = baseUrl + templateName;

                if (detailTemplateNumbers.filter(function (element) { return element === templateNumber; })[0]) {
                    templateName = 'productTemplate' + templateNumber + '.html';
                    templateUrl = baseUrl + templateName;
                }

                return $http.get(templateUrl, { cache: $templateCache });
            };

            var linker = function ($scope, element, attrs) {

                var loader = getTemplate(attrs.type.toString());

                if (loader) {
                    loader.success(function (html) {
                        element.html(html);
                    }).then(function () {
                        element.replaceWith($compile(element.html())($scope.$parent));
                    });
                }
            };

            return {
                restrict: 'A',
                scope: {
                    type: '='
                },
                link: linker
            };
    }]);