SharePoint 2013 中的异步调用延迟了 JQuery

Question

大家好，我在获取 $scope 值时遇到了问题。我想通过使用 AngularjS 来显示价值。

var deferred = $.Deferred();
var items;
var json;
//App.js
$(document).ready(function () {
    retrieveListItems();
});

function retrieveListItems() {
    var siteCollectionUrl = '/sites/DeverloperSite/';
    var context = new SP.ClientContext(siteCollectionUrl);
    var list = context.get_web().get_lists().getByTitle("StudentList");

    var queryText = "<Query><Where><And><IsNotNull><FieldRef Name='Title' /></IsNotNull><IsNotNull><FieldRef Name='School' /></IsNotNull></And> </Where></Query>";
    var query = new SP.CamlQuery();
    query.set_viewXml(queryText);
    items = list.getItems(query);
    context.load(items);
    context.executeQueryAsync(
        function retrieveListItemSuccess() {
            var listDetails = "";
            var listEnumerator = items.getEnumerator();
            while (listEnumerator.moveNext()) {
                var listItem = listEnumerator.get_current();
                //list Details is String Object
                listDetails += '{"id":"' + listItem.get_id() + '","name":"' + listItem.get_item("Title") + '","school":"' + listItem.get_item("School") + '","gender":"' + displayGender(listItem.get_item("Gender")) + '"},';
            }
            var stringObject = listDetails.substring(0, listDetails.length - 1);//string object and remove the last comma ','
            deferred.resolve(stringObject);
        },
        function retrieveListItemFail(sender, args) {
            alert("error in inner request: " + args.get_message());
        }
    );
}

这是字符串对象的值 '{"id":"1","name":"Nang Thang Hai","university":"Hutech University","gender":"true"},{"id":"2","name":"Gio Thang Chin","university":"Foreign Trade University","gender":"false"}'

var myApp = angular.module('myApp', []);
myApp.controller("myController", function ($scope) {
    deferred.done(function (value) {
        alert(value);//passing sucess here
        json = $.parseJSON('[' + value + ']');//convert string object to json data      
        alert("Name:"+json[0].name);//Nang Thang Hai
    });
$scope.students = json;//why there is nothing here ? 
});

如果我在 deferred.done 方法中移动控制器。它不起作用，因为它在 Jquery 中。我知道方法 context.executeQueryAsync() 是异步的，所以我认为我们必须先推迟它，然后再执行 angularjs。

var myApp = angular.module('myApp', []);
deferred.done(function (value) {        
    myApp.controller("myController", function ($scope) {//Error angularjs can't put inside jquery...
        var json = $.parseJSON('[' + value + ']');//convert string to json data   
        $scope.students = json;
    });
});



<table id="tbStudent" data-ng-app="myApp" data-ng-controller="myController">
        <tbody>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>School</th>
                <th>Gender</th>
            </tr>
            <tr data-ng-repeat="student in students">
                <td>{{student.id}}</td>
                <td>{{student.name}}</td>
                <td>{{student.school}}</td>
                <td>{{student.gender}}</td>
            </tr>
        </tbody>
    </table>

感谢您的帮助。你们的 cmets 正在帮助我发展我的职业生涯 :)

Answer 1

你不能在返回的 Promise 中包装控制器，下面的代码不起作用

var myApp = angular.module('myApp', []); 
    deferred.done(function (value) {  
    // Doesn't work <----
    myApp.controller("myController", function ($scope) {//Error angularjs can't put inside jquery...
        var json = $.parseJSON('[' + value + ']');//convert string to json data   
        $scope.students = json;
    }); 
});

在这个尝试中你什么也看不到，因为延迟是异步的，在启动时$scope.students 是空的。您必须将 $scope.students 移动到 .done 内才能使用数据填充 var

var myApp = angular.module('myApp', []);
myApp.controller("myController", function ($scope) {
    deferred.done(function (value) {
        alert(value);//passing sucess here
        json = $.parseJSON('[' + value + ']');//convert string object to json data      
        alert("Name:"+json[0].name);//Nang Thang Hai
        $scope.students = json; // Now you have data on your scope var
    });
// $scope.students = json; // why there is nothing here ? Because the deferred 
// is not resolved, you must move this inside the .done function
});

Angular 框架还包含用于与其他源交互的 Service、Factory 和 Provider，在这种情况下，最好将 retrieveListItems 包装在服务中并将其注入控制器。

我写了下面的代码，但我无法测试它。 您可以在 Angular 网站上了解 service & Co.，查看 this 和 this

var myApp = angular.module('myApp', []);

myApp.service("myService", 
    ['$q',
        function($q){

            function displayGender(gender){
                // TODO Implement ?
                return gender;
            }

            var service = {
                retrieveListItems: function(){

                    var deferred = $q.defer();

                    var siteCollectionUrl = '/sites/DeverloperSite/';
                    var context = new SP.ClientContext(siteCollectionUrl);
                    var list = context.get_web().get_lists().getByTitle("StudentList");

                    var queryText = "<Query><Where><And><IsNotNull><FieldRef Name='Title' /></IsNotNull><IsNotNull><FieldRef Name='School' /></IsNotNull></And> </Where></Query>";
                    var query = new SP.CamlQuery();
                    query.set_viewXml(queryText);
                    var items = list.getItems(query);
                    context.load(items);
                    context.executeQueryAsync(
                        function retrieveListItemSuccess() {
                            var listDetails = [];
                            var listEnumerator = items.getEnumerator();
                            while (listEnumerator.moveNext()) {
                                var listItem = listEnumerator.get_current();
                                //list Details is String Object
                                listDetails.push(
                                    {
                                        id : listItem.get_id(),
                                        name: listItem.get_item("Title"),
                                        school: listItem.get_item("School") ,
                                        gender: displayGender(listItem.get_item("Gender")) 
                                    }
                                );
                            }

                            deferred.resolve(listDetails);
                        },
                        function retrieveListItemFail(sender, args) {
                            deferred.reject(args.get_message());
                        }
                    );

                    return deferred.promise;
                }
            };

            return service;
        }
    ]
);

myApp.controller("myController", ['$scope', 'myService', '$log', function ($scope, myService, $log) {

    myService.retrieveListItems().then(
        function(items){
            $scope.students = items;
        },
        function(error){
            $log.error("Error in retrieveListItems: " + error);
        }
    );

}]);

Answer 2

这里是使用 Sharepoint 2013 Javascript 和 AngularJS 的答案

$(document).ready(function () {
//we don't need to use jquery here. Angular will call itself
});

function retrieveListItems() {
    var deferred = $.Deferred();
    var siteCollectionUrl = '/sites/DeverloperSite/';//   kbui6.sharepoint.com/sites/DeverloperSite/
    var context = new SP.ClientContext(siteCollectionUrl);
    var list = context.get_web().get_lists().getByTitle("StudentList");

    var queryText = "<Query><Where><And><IsNotNull><FieldRef Name='Title' /></IsNotNull><IsNotNull><FieldRef Name='School' /></IsNotNull></And> </Where></Query>";
    var query = new SP.CamlQuery();
    query.set_viewXml(queryText);
    items = list.getItems(query);
    context.load(items);
    context.executeQueryAsync(
        function retrieveListItemSuccess() {
            var listDetails = "";
            var listEnumerator = items.getEnumerator();
            while (listEnumerator.moveNext()) {
                var listItem = listEnumerator.get_current();
                //list Details is String Object
                listDetails += '{"id":"' + listItem.get_id() + '","name":"' + listItem.get_item("Title") + '","school":"' + listItem.get_item("School") + '","gender":"' + displayGender(listItem.get_item("Gender")) + '","email":"'+listItem.get_item("Email")+'"},';
            }
            var stringObject = listDetails.substring(0, listDetails.length - 1);//string object
            deferred.resolve(stringObject);
        },
        function retrieveListItemFail(sender, args) {
            alert("error in inner request: " + args.get_message());
        }
    );
    return deferred;
}

//Angular Code
var myApp = angular.module('myApp', []);
myApp.controller("myController", function ($scope) {
    $.when(retrieveListItems()).done(function (value) {
        json = $.parseJSON('[' + value + ']');//convert string to json data      
        $scope.students = json;
        //scope was not updated so we need to push it in
        if (!$scope.$$phase) {
            $scope.$apply();
        }       
    }); 

将数据从列表显示到 HTML 代码

<table id="tbStudent" data-ng-app="myApp" data-ng-controller="myController">
        <tbody>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>School</th>
                <th>Gender</th>
            </tr>
            <tr data-ng-repeat="student in students">
                <td>{{student.id}}</td>
                <td>{{student.name}}</td>
                <td>{{student.school}}</td>
                <td>{{student.gender}}</td>
            </tr>
        </tbody>
    </table>