3

这是我的代码如何在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>

4

2 回答 2

2

$.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，可能会有所帮助。

于 2015-11-17T10:59:07.087 回答
0

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

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) {
    });
});

于 2015-11-18T05:22:44.663 回答