Question

在 SharePoint 环境中尝试使用 AngularJS DateRangePicker 时出现未定义错误

2020-05-01

435

javascript angularjs sharepoint

我正在尝试使用 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')" width="10%">Date Time</th>
   <th ng-click="sortBy('Action')" width="70%">Action</th>
   <th ng-click="sortBy('AO')" width="15%">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(/&#160/g, ' ').replace(/>/g, '').replace(/>>/g, '').replace(/;/g, '').replace(/#/g, '"').replace(/&quot/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;
        });
    };
});

Answer 1

当您的承诺得到解决时（在“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;
        });
    };
});

Answer 2

为了摆脱此类错误，我将使用 ng-if 来保证过滤器接收带有 date 的 datePicker 。

我相信您不想显示表格行，即调用 ng-repeat ，直到 datePicker.date 初始化。

<tr ng-if="datePicker && datePicker.date"
    ng-repeat="item in log | orderBy:sortField:reverseOrder | filter:searchText | myfilter: datePicker.date">
</tr>

在这种情况下，一旦 datePicker.date 不为 undefined ，就会调用 myfilter ，并且它已经与摘要周期同步，因此您不需要额外的观察者。