AngularJS生日功能在SharePoint 2013失效，点击add()触发页面刷新

我在SharePoint 2013里部署了一个基于AngularJS的生日功能，现在遇到了个头疼的问题：点击绑定了add()函数的按钮时，本该渲染列表并筛选出今日过生日的人，但实际却是直接触发了页面刷新，完全没按预期工作。

相关代码片段如下：

<script type = "text/javascript" > 
var app = angular.module('app.demo', []); 
app.controller('LancerEvalController', function($scope, $http) { 
    $scope.obj = { 
        dateBirth: "", 
        nom: "", 
        mail: "" 
    }; 
    $scope.add = function() { 
        $http({ 
            method: "GET", 
            url: "http://...../_api/web/lists..."
            // 此处应该还有完整的API请求逻辑，但当前片段未写完
        });
    };
});
</script>

可能的问题原因及解决办法 #

• 按钮默认提交行为导致刷新：如果你的按钮是放在<form>标签内的<button>或<input type="submit">，点击时会默认触发表单提交，直接引发页面刷新。

  • 解决思路：
    1. 把按钮改成<button type="button">，明确指定为普通按钮，避免触发默认提交；
    2. 或者在add()函数中阻止默认事件：

       $scope.add = function($event) {
           $event.preventDefault(); // 阻止默认提交行为
           // 后续的$http请求逻辑
       };
       

       同时在HTML绑定函数时传入事件对象：<button ng-click="add($event)">查询今日寿星</button>

• AngularJS与SharePoint内置脚本冲突：SharePoint 2013自带jQuery、SP.js等脚本框架，可能和AngularJS的事件绑定机制冲突，导致Angular的事件处理未被正确触发，反而执行了页面默认行为。

  • 解决思路：确保AngularJS脚本在SharePoint自带脚本之后加载；也可以检查页面是否有其他脚本阻止了Angular的事件冒泡。

• API请求异常引发的连锁问题：虽然当前表现是页面刷新，但如果$http请求本身存在URL错误、权限不足等问题，也可能触发异常行为（通常会在控制台报错，但不排除特殊情况）。

  • 解决思路：打开浏览器开发者工具（F12），切换到Network标签查看是否有API请求发出，再到Console标签检查报错信息，排查URL和权限问题。

内容的提问来源于stack exchange，提问作者seifz