[英]Using Angular template for Kendo UI Grid detail template
我正在使用Angular JS的Kendo UI包。 我想對行詳細信息使用Angular模板,與此處的操作非常相似:
基本上我想在擴展細節時獲取一些數據,並將角度模型傳遞給模板。 這可能嗎?
我所做的(到目前為止)具有相同的需求是使用Grid上的已更改事件來填充控制器中$ 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
};
}]);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.