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

Question

我在使用 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------------------------------------
        };

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