Question

我正在开发一个SharePoint 2013应用程序，这是一个AngularJS SPA（所以我不认为SharePoint是一个问题）。

在Default.aspx页面中，我引用了所有相关脚本：

    <!-- Add your JavaScript to the following file -->
    <script type="text/javascript" src="../Scripts/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../Scripts/angular.js"></script>
    <script type="text/javascript" src="../Scripts/angular-route.js"></script>
    <script type="text/javascript" src="../Scripts/bootstrap.min.js"></script>
    <script type="text/javascript" src="../Scripts/ui-bootstrap-tpls-0.10.0.min.js"></script>
    <script type="text/javascript" src="../Scripts/moment.min.js"></script>

    <!-- ANGULARJS APPLICATION FILES -->
    <script type="text/javascript" src="../App/App.js"></script>
    <script type="text/javascript" src="../App/Controllers/main.js"></script>
    <script type="text/javascript" src="../App/Services/SharePointJSOMService.js"></script>

这是我的模板：

<div data-ng-app="appITI">
    <div data-ng-controller="MainController">
        <div id="header" class="clr-darkblue">
        <a href="#">
            <img src="../Images/head_logo.gif">
        </a>
        <span class="sp_controls" data-ng-cloak="">
            Welcome {{currentUser.Title}}
            &nbsp;&nbsp;|&nbsp;&nbsp;
            <a id="btnPreferences" data-ng-click="prefs = true">My Settings</a>
            &nbsp;&nbsp;|&nbsp;&nbsp;
            Role: {{currentUser.Role}}
            &nbsp;&nbsp;|&nbsp;&nbsp;
            <a href="#">Logout</a>
        </span>
        </div> <!-- /#header -->
    </div> <!-- /mainController -->
</div> <!-- /ANGULAR APP -->

如您所见，我正在使用ng-cloak，但我也尝试过ng-bind。

这是App.js

var appITI = angular.module('appITI', ['ui.bootstrap']);

var hostweburl;
var appweburl;
var currentUser;

$(document).ready(function () {
    SP.SOD.executeOrDelayUntilScriptLoaded(runMyCode, "SP.js");
    function runMyCode(){} // end runMyCode fn
}); // end Document.Ready

和控制器：

(function(){
    var MainController = function($scope, SharePointJSOMService){
        SP.SOD.executeOrDelayUntilScriptLoaded(runMyCode, "SP.js");
        function runMyCode(){

        //get currentUser
        $.when(SharePointJSOMService.getCurrentUser())
        .done(function(jsonObject){
            currentUser = jsonObject.d;
            $scope.currentUser = currentUser;
            $scope.currentUser.Role = "RSC";
            console.dir($scope);
        }).fail(function(err){ console.info(JSON.stringify(err)); });

        } // end runMyCode fn
    }; // end MainController

    MainController.$inject = ['$scope', 'SharePointJSOMService'];

    angular.module('appITI').controller('MainController', MainController);
})();

最后，这是服务：

appITI.service('SharePointJSOMService', function($q, $http){
    this.getCurrentUser = function(){
        var deferred = $.Deferred();

        JSRequest.EnsureSetup();
        hostweburl = decodeURIComponent(JSRequest.QueryString["SPHostUrl"]);
        appweburl = decodeURIComponent(JSRequest.QueryString["SPAppWebUrl"]);

        var userid = _spPageContextInfo.userId;
        var restQueryUrl = appweburl + "/_api/web/getuserbyid(" + userid + ")";

        var executor = new SP.RequestExecutor(appweburl);
        executor.executeAsync({
            url: restQueryUrl,
            method: "GET",
            headers: { "Accept": "application/json; odata=verbose" },
            success: function(data, textStatus, xhr){
                deferred.resolve(JSON.parse(data.body));
            },
            error: function(xhr, textStatus, errorThrown){
                deferred.reject(JSON.stringify(xhr));
            }
        });
        return deferred;
    }; // /getCurrentUser fn
});

根据我阅读和研究的所有内容，这应该有效。在console.dir中，显示了currentUser的所有内容：

{
       [functions]: ,
       $$asyncQueue: [ ],
       $$childHead: null,
       $$childTail: null,
       $$destroyed: false,
       $$isolateBindings: { },
       $$listenerCount: { },
       $$listeners: { },
       $$nextSibling: null,
       $$phase: null,
       $$postDigestQueue: [ ],
       $$prevSibling: null,
       $$watchers: [ ],
       $id: "003",
       $parent: { },
       $root: { },
       currentUser: {
          [functions]: ,
          __metadata: { },
          Email: "my.name@company.mail.onmicrosoft.com",
          Groups: { },
          Id: 9,
          IsHiddenInUI: false,
          IsSiteAdmin: false,
          LoginName: "i:0#.f|membership|my.name@corporate.com",
          PrincipalType: 1,
          Role: "RSC",
          Title: "Name, My (My Title)",
          UserId: { }
       },
       this: { }
    }

Answer 1

当您使用$.when jQuery的promise实现时，您需要通知angular $scope中的某些内容需要更新。

在此逻辑结束时，请致电$scope.$apply()：

$.when(SharePointJSOMService.getCurrentUser())
    .done(function(jsonObject){
        currentUser = jsonObject.d;
        $scope.currentUser = currentUser;
        $scope.currentUser.Role = "RSC";
        console.dir($scope);
        $scope.$apply(); // <-- tell angular to update the scope and refresh the UI
    }).fail(function(err){ console.info(JSON.stringify(err)); });

注意：只有在引用angular-land

之外的内容时才需要这样做

AngularJS：数据绑定未按预期工作

1 个答案: