在 Kendo 日期选择器的内容属性中，我想调用控制器函数来设置日历中给定日期单元格的背景颜色。到目前为止我的代码：
<!DOCTYPE html>
<html>
<head>
<title>AngularJS example</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/6.7.0/default/default-ocean-blue.css">
<script src="https://kendo.cdn.telerik.com/2023.2.829/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.2.829/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.2.829/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="MyModule">
<div ng-controller="MyCtrl">
<input kendo-date-picker k-options="datePickerOptions"/>
</div>
</div>
<script>
angular.module("MyModule", ["kendo.directives"])
.controller("MyCtrl", function ($scope) {
$scope.datePickerOptions = {
value: new Date(),
month: {
content: (data) => {{dateBackground(data)}}
},
};
$scope.dateBackground = function(data) {
return "<span class='color'>" + data.value + "</span>";
}
})
</script>
<style>
.k-calendar-td:has(.color){
background-color: red;
}
</style>
</body>
</html>
但是，当我尝试此代码时，我收到此错误：
result:7 Uncaught ReferenceError: dateBackground is not defined at content (result:7:36) at _e (kendo.all.js:322401:19) at content (kendo.all.js:322401:19) at ee (kendo.all.js:322401:19) at Object.content (kendo.all.js:322401:19) at init.navigate (kendo.all.js:322401:19) at init.setOptions (kendo.all.js:322401:19) at N._setOptions (kendo.all.js:322401:19) at N._calendar (kendo.all.js:322401:19) at N.open (kendo.all.js:322401:19)我可以这样做吗？如果是这样，正确的语法是什么？
你有一个拼写错误，它应该是
$scope.dateBackground(data)angular.module("MyModule", ["kendo.directives"])
.controller("MyCtrl", function($scope) {
$scope.datePickerOptions = {
value: new Date(),
month: {
content: (data) => {
{
$scope.dateBackground(data)
}
}
},
};
$scope.dateBackground = function(data) {
return "<span class='color'>" + data.value + "</span>";
}
}).k-calendar-td:has(.color) {
background-color: red;
}<!DOCTYPE html>
<html>
<head>
<title>AngularJS example</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/6.7.0/default/default-ocean-blue.css">
<script src="https://kendo.cdn.telerik.com/2023.2.829/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.2.829/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.2.829/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="MyModule">
<div ng-controller="MyCtrl">
<input kendo-date-picker k-options="datePickerOptions" />
</div>
</div>
</body>
</html>