尝试在 SharePoint 环境中使用 AngularJS DateRangePicker 时出现未定义错误
Posted
技术标签:
【中文标题】尝试在 SharePoint 环境中使用 AngularJS DateRangePicker 时出现未定义错误【英文标题】：Getting undefined error trying to use AngularJS DateRangePicker in SharePoint environment 【发布时间】：2020-08-15 15:33:37 【问题描述】：我正在尝试使用 AngularJS 日期范围选择器根据日期范围过滤数据。我无法弄清楚为什么我会收到 TypeError “无法读取未定义的属性 'startDate'。在 angularjs 控制器的顶部附近，我正在使用 startDate 属性定义日期对象。但我仍然收到此错误。这是一个问题吗使用 SharePoint？如何解决此问题以在 SharePoint 中工作。代码在具有本地 json 文件的 LAMP 堆栈中运行良好，但在 SP 上运行良好。我试图在 SP 2016 上运行。谢谢。
这是我如何在 html 文件的头部引入所有依赖项。
<head>
<title>Rolling Log</title>
<meta charset="uft-8">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/daterangepicker.css" />
<link rel="stylesheet" href="css/styles.css">
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/angular.js"></script>
<!-- <script src="js/angular-route.js"></script> -->
<script src="js/moment.js"></script>
<script src="js/daterangepicker.js"></script>
<script src="js/angular-daterangepicker.js"></script>
</head>
这是 html 文件的正文：
<body ng-app="myApp" ng-controller="myController" ng-clock>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
...
</nav>
<div class="wrapper">
<div><h1>CM Rolling Log</h1></div>
<div id="top">
<hr>
<span style="float: right; padding: 2px;">Search: <input type="text" ng-model="searchText"></span>
<label class="my-auto mr-2">Date Opened:</label>
<input date-range-picker class="form-control" ng-model="datePicker.date" clearable="true" style="max-width: 280px;">
<table>
<tr>
<th ng-click="sortBy('timestamp')" >Date Time</th>
<th ng-click="sortBy('Action')" >Action</th>
<th ng-click="sortBy('AO')" >AO</th>
</tr>
<tr ng-repeat="item in log | orderBy:sortField:reverseOrder | filter:searchText | myfilter: datePicker.date">
<td>item.timestamp | date: 'MM/dd/yyyy HH:MM'</td>
<td>item.Action | removeHTMLTags | strip </td>
<td>item.AO</td>
</tr>
</table>
</div>
<div id="bottom">
<form action="" method="POST" ng-submit="createFunc()">
<br /><span id="user"></span> <br /> <br />
Comment: <br /> <textarea id="action" rows="5" cols="130" name="comment"></textarea> <br /><br />
<input type="submit" name="submit_btn" value="Post comment">
</form>
</div>
</div>
带有应用日期范围选择器的 angularjs 代码位于底部。
var app = angular.module('myApp', ['daterangepicker']);
app.filter('removeHTMLTags', function()
return function(text)
return text ? String(text).replace(/<[^>]+/gm, '') : '';
);
app.controller('myController',
function($scope, $http)
$http(
method: 'GET',
url: "https://.../_api/web/lists/GetByTitle('RollingLog')/items?$top=1000&$select=timestamp,Action,AO",
headers: "Accept": "application/json;odata=verbose"
).then(function (data, status, headers, config)
$scope.log = data.data.d.results;
$scope.datePicker = date:
startDate: null, endDate: null
;
$scope.searchText = "";
$scope.reverseOrder = true;
$scope.sortField = "timestamp";
$scope.sortBy = function(sortField)
$scope.reverseOrder = ($scope.sortField === sortField) ? !$scope.reverseOrder : false;
$scope.sortField = sortField;
;
jQuery.ajax(
url: "https://.../_api/web/currentuser?$select=Title",
type: "GET",
headers: "Accept": "application/json;odata=verbose","Content-Type": "application/json;odata=verbose",
success: function(data)
username = data.d.Title;
console.log("user name: " + username);
document.getElementById("user").innerHTML = username;
,
error: function(data)
console.log("Error occurred trying to get user id");
);
, function errorCallback(response)
);
$scope.getFormDigest = function()
console.log("Inside getFormDigest");
var formdigest;
jQuery.ajax(
url: "https://.../_api/contextinfo",
type: "POST",
async: false,
headers:
"accept": "application/json;odata=verbose",
type: "POST"
,
success: function(data)
console.log(typeof data);
formdigest = data.d.GetContextWebInformation.FormDigestValue
);
return formdigest;
;
$scope.createFunc = function()
console.log("Inside createFunc...");
var dt = new Date();
var action = document.getElementById("action").value;
var formdigest = $scope.getFormDigest();
jQuery.ajax(
url: "https://.../_api/web/lists/GetByTitle('RollingLog')/items",
method: "POST",
data: JSON.stringify(
'__metadata' : 'type': 'SP.Data.RollingLogListItem',
'Action': action,
'AO': username,
'timestamp': dt
),
headers:
"accept": "application/json;odata=verbose",
"content-type": "application/json;odata=verbose",
"X-RequestDigest": formdigest
,
success: function(data)
console.log("entry created successfully...");
,
error: function(data)
console.log(("#__REQUESTDIGEST").val());
console.log("Error message: " + JSON.stringify(data.responseJSON.error));
);
;
).filter('strip', function()
return function(str)
return str.replace(/>/g, '').replace(/ /g, ' ').replace(/>/g, '').replace(/>>/g, '').replace(/;/g, '').replace(/#/g, '"').replace(/"/g,'"');
);
app.filter("myfilter", function()
return function(items, date)
if (!date.startDate || !date.endDate)
return items
startDate = moment(date.startDate);
endDate = moment(date.endDate);
return items.filter(function(elem)
var openedDate = moment(elem.date_opened);
return startDate.diff(openedDate, 'days') <= 0 && endDate.diff(openedDate, 'days') >= 0;
);
;
);
【问题讨论】：
如果您有任何演示该问题的演示，它将有很大帮助。 【参考方案1】：为了消除此类错误，我将使用ng-if 来保证过滤器接收datePicker 和date。
我相信您不想显示表格行 a.e。调用ng-repeat 直到datePicker.date 被初始化。
<tr ng-if="datePicker && datePicker.date"
ng-repeat="item in log | orderBy:sortField:reverseOrder | filter:searchText | myfilter: datePicker.date">
</tr>
在这种情况下，myfilter 将被调用一次 datePicker.date 不是 undefined 并且它已经与摘要周期同步，因此您不需要额外的观察者。
【讨论】：
【参考方案2】：当您的承诺得到解决时（在“then”内），您正在初始化您的日期选择器，因此在此之前您的日期选择器是未定义的，因此您会收到“无法读取未定义的属性 'startDate'”错误。你可以
1) 将初始化代码移至控制器的开头
app.controller('myController',
function($scope, $http)
$scope.datePicker = date:
startDate: null, endDate: null
;
...
2) 或者您可以在过滤器中添加空控件
app.filter("myfilter", function()
return function(items, date)
if(date == undefined)
return items;
if (!date.startDate || !date.endDate)
return items
startDate = moment(date.startDate);
endDate = moment(date.endDate);
return items.filter(function(elem)
var openedDate = moment(elem.date_opened);
return startDate.diff(openedDate, 'days') <= 0 && endDate.diff(openedDate, 'days') >= 0;
);
;
);
【讨论】：
以上是关于尝试在 SharePoint 环境中使用 AngularJS DateRangePicker 时出现未定义错误的主要内容，如果未能解决你的问题，请参考以下文章
SharePoint 2010 SecurityTokenService错误
SharePoint 2010升级到SharePoint 2013
Sharepoint 2013在企业环境中部署和管理-专题视频课程
Sharepoint 2013在企业环境中部署和管理-专题视频课程