使用Angular模板进行Kendo UI Grid详细模板

Question

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

Kendo Grid Detail Template

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

Answer 1

我所做的（迄今为止）与此相同的需求是使用Grid上已更改的事件来填充控制器中$ scope的'SelectedRow'对象。对于DetailTemplate，我有一个包含指令的div，该指令从$ templateCache或使用$ http加载模板并编译并将其链接到$ 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 
      }; 
    }]);