AngularJS：数据绑定不是'；他没有按预期工作

我正在开发一个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>

以及控制器：

(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: { }
    }

---

当您使用

$时。当

jQuery的promise实现时，您需要通知angular，

$范围

中的某些内容需要更新

在此逻辑结束时，调用

$scope.$apply（）

：

$.when（SharePointJSOMService.getCurrentUser（））
.done（函数（jsonObject）{
currentUser=jsonObject.d；
$scope.currentUser=currentUser；
$scope.currentUser.Role=“RSC”；
console.dir（$scope）；
$scope.$apply（）；//当（）时，不应混合使用
$
with Angular.js。Angular的设计目的是消除对jQuery异步性的需求。我正在关注微软一位高级产品营销经理的编码，这是我目前所知的最好的编码。我希望很快能更好地学习Angular和SharePoint。同意，这是理想的解决方案，但有时现有的逻辑和代码必须重新使用，这就解决了OP试图解决的问题。是的，我的评估过于仓促。Angular可以很容易地合并到使用其他框架的现有遗留代码中。我的评论是说，如果您从头开始创建Angular项目，99.9%的时间没有理由需要jQuery（Angular包括它自己的jqlite版本）。新的Angular开发人员需要以声明的方式思考，才能真正“获取”Angular.added$scope.apply（），这正是您建议和获得的地方“JavaScript运行时错误：对象不支持属性或方法‘apply’。没关系——我还在调试中。我退出了它，F5运行得很好。谢谢！！！方法名是
$apply
不是
apply
应该补充的是，只要你以这种方式混合使用jQuery和Angular，你就会不断需要
$scope.$apply。”（）
和其他各种黑客。避免它！
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
});

{
       [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: { }
    }

$.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)); });