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