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

Posted 2023-03-27

【中文标题】如何使用 AngularJS 初始化 SharePoint 脚本编辑器 WebPart 内容

【英文标题】：How to Initialize SharePoint Script Editor WebPart Content using AngularJS

【发布时间】：2020-08-10 04:38:46

【问题描述】：

我在使用 SharePoint 脚本 WebPart 和 AngularJS 获取要绑定的初始值时遇到问题。我已经尝试了所有不同的方法来初始化 ng-int、自定义初始化函数、准备好文档。在所有情况下，都会调用函数并设置值，但 UI 不会更新值，直到我再次与控制器交互。

在下面的代码中，它是未绑定的 usertitle。

那么直接的问题是在 SharePoint、Script WebPart 和 AngularJS 的上下文中成功初始化值的正确方法是什么？

只是为了显示加载后 UI 的样子，填充了其他绑定但没有填充用户标题。

单击下一步按钮，然后单击上一步（在此期间不调用函数）。

脚本编辑器中的 html

<div id="appDiv" ng-app="myapp">
        <div id="controllerDiv" ng-controller="MyController" >
                <div class="item10 mainborder">
                    <div ng-show=showPage1() ng-init="firstFunction(this)">
                            <p class="lead">Welcome usertitle!</p>
                    </div>
                    <div>
                        <input type="button" value="Previous" ng-click="pagePrevious()" ng-disabled=showPage1() />
                        <span>pageXofY()</span>
                        <input type="button" value="Next" ng-click="pageNext()" ng-disabled=showPage6() />
                    </div>
                </div>
        </div>
    </div>

Angular 控制器 JS

        $scope.firstFunction = function ($scope) 
            //User Info-------------------------------------
            var userid = _spPageContextInfo.userId;
            var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/getuserbyid(" + userid + ")";

            var requestHeaders =  "accept": "application/json;odata=verbose" ;
            $.ajax(
                url: requestUri,
                contentType: "application/json;odata=verbose",
                headers: requestHeaders,
                success: onSuccessUInfo,
                error: onErrorUInfo
            );

            function onSuccessUInfo(data, request) 
                $scope.usertitle = data.d.Title;
                $scope.email = data.d.Email;
                $scope.loginname = data.d.LoginName;
                //alert(loginName);
            

            function onErrorUInfo(error) 
                alert("error");
            

        //End USeriNfo------------------------------------
        ;

【参考方案1】：

之前测试过的demo here，希望对你有帮助。

<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> 

【讨论】：

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