如何使用AngularJS初始化SharePoint脚本编辑器Web部件内容

我在使用SharePoint脚本Web部件和AngularJS获取要绑定的初始值时遇到问题。我尝试了所有不同的方法来初始化ng int、自定义init函数和文档就绪。在所有情况下，都会调用函数并设置值，但在我再次与控制器交互之前，UI不会使用这些值进行更新

在下面的代码中，{{usertitle}}没有绑定

因此，直接的问题是，在SharePoint、脚本Web部件和AngularJS的上下文中，成功初始化值的正确方法是什么

为了显示加载后UI的外观，会填充其他绑定，但不会填充usertitle。

单击下一步按钮，然后单击上一步（在此过程中不调用函数）

脚本编辑器中的HTML

欢迎{{usertitle}

{{pageXofY（）}}

上一个测试过的演示，希望对您有所帮助

<script type="text/javascript" src="/sites/Developer/SiteAssets/angular.min.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            //   alert('pease select IT');
        };

        var app = angular.module('pageLoadApp', []);
        app.controller('ContactsUpdate', function ($scope) {
            $scope.contact = { firstName: "", lastName: "", Location: "", Departmant: "" };
            $scope.UpdateContact = function ($event) {
                var x = $scope.contact;
                $event.preventDefault();

                //if (x.Departmant == "HR") {
                //    alert('pease select IT , This is update');
                //}
                //else {
                var clientContext = new SP.ClientContext.get_current();
                var web = clientContext.get_web();
                var list = web.get_lists().getByTitle('ContactDetails');

                //this.oListItem = list.getItemById(9);
                var listItem = list.getItemById(1);

                listItem.set_item('Title', 'My new updated Title');

                //  listItem.set_item('Title', x.firstName);
                listItem.set_item('firstName', x.firstName);
                listItem.set_item('lastName', x.lastName);
                listItem.set_item('fullName', x.firstName + " " + x.lastName);
                listItem.set_item('Location', x.Location);
                listItem.set_item('Departmant', x.Departmant);
                alert(listItem.get_item('Title'));

                listItem.update();

                clientContext.executeQueryAsync(
                   Function.createDelegate(this, onQuerySucceededUpdate),
                   Function.createDelegate(this, onQueryFailedUpdate)
                   );
            }
            SP.SOD.executeFunc('sp.js', 'SP.ClientContext', (function () {
                var clientContext = new SP.ClientContext.get_current();
                var web = clientContext.get_web();
                var list = web.get_lists().getByTitle('ContactDetails');

                //this.oListItem = list.getItemById(9);
                var listItem = list.getItemById(1);
                clientContext.load(listItem);
                clientContext.executeQueryAsync(function () {
                    $scope.$apply(function () {
                        $scope.contact = { firstName: listItem.get_item('firstName'), lastName: listItem.get_item('lastName'), Location: listItem.get_item('Location'), Departmant: listItem.get_item('Departmant') };
                    });
                },
                function (sender, args) {
                    console.log("An error occurred when deletion");
                });
            }));
        })

        onQuerySucceededUpdate = function () {
            alert('Successfully updated the contact');
        }

        onQueryFailedUpdate = function (sender, args) {
            alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
        }

    </script>  
<h1>Contact Information:</h1>  
<br />  
<div >  

    <div ng-app="pageLoadApp" ng-controller="ContactsUpdate">  
        <strong>First Name</strong>  
        <input type="text" ng-model="contact.firstName" /><br />  
        <br />  
        <strong>Last Name</strong>   
        <input type="text" ng-model="contact.lastName" /><br />  
        <br />  
        <strong>Location&nbsp;&nbsp;</strong> <input type="text" ng-model="contact.Location" /><br />  
        <br />  
        <strong>Departmant</strong>     

        <select id="Departmant" ng-model="contact.Departmant" >
            <option>HR</option>
            <option>IT</option>

        </select><input type="submit" value="Submit" ng-click="UpdateContact($event)" />  
    </div>  
</div> 

window.onload=函数（）{
//警报（“请选择它”）；
};
var-app=angular.module（'pageLoadApp'，[]）；
应用程序控制器（'ContactsUpdate'，函数（$scope）{
$scope.contact={firstName:，lastName:，位置：，部门：}；
$scope.UpdateContact=函数（$event）{
var x=$scope.contact；
$event.preventDefault（）；
//如果（x.Departmant==“HR”）{
//警报（“请选择它，这是更新”）；
//}
//否则{
var clientContext=new SP.clientContext.get_current（）；
var web=clientContext.get_web（）；
var list=web.get_list（）.getByTitle（'ContactDetails'）；
//this.oListItem=list.getItemById（9）；
var listItem=list.getItemById（1）；
设置_项（'Title'，'My new updated Title'）；
//listItem.set_项（'Title'，x.firstName）；
listItem.set_项（'firstName'，x.firstName）；
listItem.set_项（'lastName'，x.lastName）；
listItem.set_项（'fullName'，x.firstName+“”+x.lastName）；
listItem.set_项（'Location'，x.Location）；
listItem.set_项目（'Departmant'，x.Departmant）；
警报（listItem.get_项目（“标题”）；
update（）；
clientContext.executeQueryAsync(
Function.createDelegate（此，onQuerySucceedDupDate），
createDelegate（这个，onQueryFaileUpdate）
);
}
SP.SOD.executeFunc（'SP.js'，'SP.ClientContext'，（函数（）{
var clientContext=new SP.clientContext.get_current（）；
var web=clientContext.get_web（）；
var list=web.get_list（）.getByTitle（'ContactDetails'）；
//this.oListItem=list.getItemById（9）；
var listItem=list.getItemById（1）；
clientContext.load（listItem）；
clientContext.executeQueryAsync（函数（）{
$scope.$apply（函数（）{
$scope.contact={firstName:listItem.get_item（'firstName'），lastName:listItem.get_item（'lastName'），位置：listItem.get_item（'Location'），Departmant:listItem.get_item（'Departmant'）；
});
},
函数（发送方，参数）{
log（“删除时发生错误”）；
});
}));
})
onQuerySucceededUpdate=函数（）{
警报（“已成功更新联系人”）；
}
onQueryFailedUpdate=函数（发送方，参数）{
警报（'请求失败。'+args.get_message（）+'\n'+args.get_stackTrace（））；
}
联系方式：


名字




姓氏




位置



部门
人力资源
信息技术

谢谢你，朋友。SP.SOD.executeFunc部分是关键。我确实必须删除clientContext.load，不知道它在做什么，并且似乎不需要它。再次感谢你，请保持健康！