Question

这是我的代码如何使用AngularJS中的rest api获取列表数据。这里我有问题我无法绑定sp中的列表数据。我发现无法调用控制器。

<pre lang="Javascript">

var myAngApp = angular.module('SharePointAngApp', []);
alert('sss');
myAngApp.controller('spCustomerController', function ($scope, $http) {

    $http({
        method: 'Post',
        url: appWebUrl + "/_api/SP.AppContextSite(@TargetSite)/web/lists/getByTitle('InfoList')/items?@TargetSite='" + targetSiteUrl + "'",
        headers: { "Accept": "application/json;odata=verbose" }
    }).success(function (data, status, headers, config) {
        $scope.customers = data.d.results;
    }).error(function (data, status, headers, config) {
    });

    $(document).ready(function () {
        var appWebUrl = "";

        var targetSiteUrl = "";
        var ready = false;
        var params = document.URL.split("?")[1].split("&");
        for (var i = 0; i < params.length; i = i + 1) {
            var param = params[i].split("=");
            switch (param[0]) {
                case "SPAppWebUrl":
                    appWebUrl = decodeURIComponent(param[1]);
                    break;
                case "SPHostUrl":
                    targetSiteUrl = decodeURIComponent(param[1]);
                    break;
            }
        }
        // load the request executor script, once ready set a flag that can be used to check against later
        $.getScript(appWebUrl + "/_layouts/15/SP.RequestExecutor.js", function () {
            ready = true;
        });
    });

});


</pre>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre lang="HTML">
    <div ng-app="SharePointAngApp" class="row">
        <div ng-controller="spCustomerController" class="span10">
            <table class="table table-condensed table-hover">
                <tr>
                    <th>Title</th>
                    <th>Employee</th>
                    <th>Company</th>

                </tr>
                <tr ng-repeat="customer in customers">
                    <td>{{customer.Title}}</td>
                    <td>{{customer.Employee}}</td>
                    <td>{{customer.Company}}</td>
                </tr>
            </table>
        </div>
    </div>
</pre>

Answer 1

$。getScript必须完成然后调用$ http，你还需要传递URL的变量。看看这个

var myAngApp = angular.module('SharePointAngApp', []);
myAngApp.controller('spCustomerController', function ($scope, $http, $location) {
    var params = $location.search();
    var appWebUrl = params.SPAppWebUrl;
    var targetSiteUrl = params.SPHostUrl; 
    var ready_check = false;

    // this has to finish and then call getData
    ready().then(getData);

    function ready() {

        // load the request executor script, once ready set a flag that can be used to check against later
        return $.getScript(appWebUrl + "/_layouts/15/SP.RequestExecutor.js", function () {
            ready_check = true;
        })

    }

    function getData() {
        return $http({
            method: 'POST',
            url: appWebUrl + "/_api/SP.AppContextSite(@TargetSite)/web/lists/getByTitle('InfoList')/items?@TargetSite='" + targetSiteUrl + "'",
            headers: { "Accept": "application/json;odata=verbose" }
        }).success(function (data, status, headers, config) {
            $scope.customers = data.d.results;
        }).error(function (data, status, headers, config) {
        });

    }

});

您应该查看此$location，可能会有所帮助。

Answer 2

终于找到了解决方案，但有一个小问题，它只能读取第一个columan即标题其余项目不能循环检查$ http中的url

＆＃13;

var appWebUrl, targetSiteUrl;
var ready = false;
var myAngApp = angular.module('SharePointAngApp', []);
myAngApp.controller('spCustomerController', function ($scope, $http) {
    var params = document.URL.split("?")[1].split("&");
    for (var i = 0; i < params.length; i = i + 1) {
        var param = params[i].split("=");
        switch (param[0]) {
            case "SPAppWebUrl":
                appWebUrl = decodeURIComponent(param[1]);
                break;
            case "SPHostUrl":
                targetSiteUrl = decodeURIComponent(param[1]);
                break;
        }
    }
    // load the request executor script, once ready set a flag that can be used to check against later
    $.getScript(appWebUrl + "/_layouts/15/SP.RequestExecutor.js", function () {
        ready = true;
    });
    $http({
        method: 'Get',
         url: appWebUrl + "/_api/SP.AppContextSite(@TargetSite)/web/lists/getByTitle('InfoList')/items?@TargetSite='" + targetSiteUrl + "'",
        //url: appWebUrl + "/_api/SP.AppContextSite(@TargetSite)/web/lists/getByTitle('InfoList')/items?$Select=Title,Employee,Company&@TargetSite='" + targetSiteUrl + "'",
        headers: { "Accept": "application/json;odata=verbose" }
    }).success(function (data, status, headers, config) {
        $scope.customers = data.d.results;
    }).error(function (data, status, headers, config) {
    });
});

＆＃13;

如何使用angularjs在RestApi中获取列表数据

2 个答案: