采用了棱角分明的模板剑道UI电网详细信息模板 [英] Using Angular template for Kendo UI Grid detail template

问题描述

我使用的剑道UI包角JS。我想用一个角模板行的细节，非常相似，都是在这里完成：

I am using the Kendo UI package for Angular JS. I would like to use an Angular template for the row detail, very similar to what is done here:

剑道电网详细信息模板

基本上我想获取一些数据时的细节被扩展，并通过角模型的模板。这可能吗？

Essentially I would like to fetch some data when details are expanded, and pass an angular model to the template. Is this possible?

推荐答案

我已经做了（到目前为止）这同样需要为使用改变事件的网格以填充在$范围SelectedRow'对象我控制器。对于DetailTemplate，我有一个包含加载模板无论是从$ templateCache或使用$ http和编译它，并将其链接到$范围指令的div。一个与模板被编译和它们链接到$范围和时所发生的定时的问题。 （因为我需要为每行不同的详细信息模板我的问题是更糟糕）

What I have done (so far) with this same need is use the changed event on the Grid to populate a 'SelectedRow' object on the $scope in my controller. For the DetailTemplate, I have a div that contains a directive that loads the template either from the $templateCache or using $http and compiles it and links it to the $scope. One of the problems with templates is compiling and linking them to the $scope and the timing of when that takes place. (My problem was even worse as I needed a different detail template for each row)

                $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
            };
    }]);

这篇关于采用了棱角分明的模板剑道UI电网详细信息模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！