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

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

javascript angularjs sharepoint

Javascript 在SharePoint环境中尝试使用AngularJS DateRangePicker时出现未定义错误,javascript,angularjs,sharepoint,Javascript,Angularjs,Sharepoint,我试图使用AngularJS日期范围选择器根据日期范围过滤数据。我弄不明白为什么会出现打字错误“无法读取未定义的属性'startDate'。在angularjs控制器的顶部附近，我用startDate属性定义date对象。但我还是犯了这个错误。这是SharePoint的问题吗？如何在SharePoint中解决此问题。该代码在带有本地json文件的LAMP堆栈中工作正常，但在SP上不工作。我试图在SP 2016上运行。多谢各位下面是我如何在html文件的头部引入所有依赖项的 <head&g

我试图使用AngularJS日期范围选择器根据日期范围过滤数据。我弄不明白为什么会出现打字错误“无法读取未定义的属性'startDate'。在angularjs控制器的顶部附近，我用startDate属性定义date对象。但我还是犯了这个错误。这是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>


...
滚轴原木

搜索：
开放日期：
日期时间
行动
敖
{{item.timestamp}日期：'MM/dd/yyyy HH:MM'}
{{item.Action | removeThltags | strip}
{{item.AO}




评论：

带有应用日期范围选择器的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;
        });
    };
});

var-app=angular.module（'myApp'，['daterangepicker']）；
app.filter（'removeHTMLTags'，function（）{
返回函数（文本）{
返回文本？字符串（文本）。替换（/]+/gm'，）：''；
}
});
应用程序控制器（“myController”，
函数（$scope，$http）{
$http({
方法：“GET”，
url:“https://.../_api/web/lists/GetByTitle（'RollingLog'）/items？$top=1000&$select=timestamp，Action，AO“，
标题：{“接受”：“应用程序/json；odata=verbose”}
}).then（函数（数据、状态、标题、配置）{
$scope.log=data.data.d.results；
$scope.datePicker={date:{
开始日期：null，结束日期：null
} };
$scope.searchText=“”；
$scope.reverseOrder=true；
$scope.sortField=“timestamp”；
$scope.sortBy=函数（sortField）{
$scope.reverseOrder=（$scope.sortField==sortField）！$scope.reverseOrder:false；
$scope.sortField=sortField；
};
jQuery.ajax({
url:“https://.../_api/web/currentuser?$select=标题“，
键入：“获取”，
标题：{“接受”：“应用程序/json；odata=verbose”，“内容类型”：“应用程序/json；odata=verbose”}，
成功：功能（数据）{
用户名=data.d.Title；
console.log（“用户名：”+用户名）；
document.getElementById（“用户”）.innerHTML=用户名；
},
错误：函数（数据）{
log（“试图获取用户id时出错”）；
}
});
}，函数errorCallback（响应）{
});
$scope.getFormDigest=函数（）{
log（“内部getFormDigest”）；
var formdigest；
jQuery.ajax({
url:“https://.../_api/contextinfo",
类型：“POST”，
async:false，
标题：{
“接受”：“application/json；odata=verbose”，
类型：“职位”
},
成功：功能（数据）
{   
console.log（数据类型）；
formdigest=data.d.GetContextWebInformation.FormDigestValue
}
});
报税表摘要；
};
$scope.createFunc=function（）{
log（“内部createFunc…”）；
var dt=新日期（）；
var action=document.getElementById（“action”）.value；
var formdigest=$scope.getFormDigest（）；
jQuery.ajax({
url:“https://.../_api/web/lists/GetByTitle（'RollingLog'）/items“，
方法：“张贴”，
数据：JSON.stringify({
“_metadata'：{'type'：'SP.Data.RollingLogListItem'}，
"行动":行动,，
“AO”：用户名，
“时间戳”：dt
}),
标题：{
“接受”：“application/json；odata=verbose”，
“内容类型”：“应用程序/json；odata=verbose”，
“X-RequestDigest”：formdigest
},
成功：功能（数据）{
log（“条目创建成功…”）；
},
错误：函数（数据）{
console.log（（“#u请求摘要”）.val（）；
log（“错误消息：+JSON.stringify（data.responseJSON.Error））；
}
});
};
}
).filter（'strip'，function（）{
返回函数（str）{
返回str.replace（/>/g'）。replace（/>/g'）。replace（/>/g'）。replace（/>/g'）。replace（///g'）。replace（///g'）。replace（///g'）。replace（///g'））。replace（///g'）；
}
});
app.filter（“myfilter”，函数（）{
返回函数（项目、日期）{
如果（！date.startDate | |！date.endDate）{
退货项目
}
开始日期=时刻（日期开始日期）；
endDate=时刻（date.endDate）；
返回项目。过滤器（功能（elem）{
var openedDate=时刻（元素打开日期）；
返回起始日期差异（openedDate，'天'）=0；
});
};
});

当您的承诺得到解决时，您正在初始化日期选择器（在“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;
        });
    };
});

app.filter（“myfilter”，函数（）{
返回函数（项目、日期）{
如果（日期==未定义）{
退货项目；
}
<tr ng-if="datePicker && datePicker.date"
    ng-repeat="item in log | orderBy:sortField:reverseOrder | filter:searchText | myfilter: datePicker.date">
</tr>