AngularJS 工厂和控制器代码，不产生任何东西

Question

当下面的代码运行时，我的控制台中没有任何显示表明出现任何问题，但正如您在 listService 中看到的那样，它会在结果中发出警报，但警报显示为“未定义”。

我最终试图让它重复运行以列出视图中的所有组织。任何帮助表示赞赏！

这是我的工厂。

app.factory("listService", ["$rootScope", "$http", "$location", "$routeParams",
    function($rootScope, $http, $location, $routeParams) {
        var siteURL = "jdfyhgyjdfghyjdgfyhkjyhjk";
        var svc = {};
        var data = null;

        svc.getListItems = function(listName) {
            $http({
                url: siteURL + "/_api/web/lists/GetByTitle('" + listName + "')/items",
                method: "GET",
                async: false,
                headers: {
                    "Accept": "application/json;odata=verbose",
                    "X-RequestDigest": jQuery("#__REQUESTDIGEST").val()
                },
                success: function(response, status, headers, config) {
                    data = response.data.d.results;
                    alert(data);
                },
                error: function(response, status, headers, config) {
                    $rootScope.error = status;
                }
            });
        }
        return svc;
    }
]);

这是我的控制器。

app.controller("readOrganizationsCtrl", ["$scope", "$http", "$location", "$routeParams", "listService",
    function($scope, $http, $location, $routeParams, listService) {
        $scope.organizations = listService.getListItems('Organizations');
    }
]);

最后是我的观点。

<div class="form-group">
    <input type="text" class="form-control" id="search" placeholder="Search organizations" data-ng-model="search" />
</div>
<table class="table table-stripped table-hover">
    <thead>
        <tr>
            <th>Title</th>
        </tr>
    </thead>
    <tbody>
        <tr data-ng-repeat="organization in organizations | filter:search" data-ng-click="editOrganization($index)">
            <td>{{organization.Title}}</td>
        </tr>
    </tbody>
</table>
<div class="form-group">
    <button data-ng-click="addOrganization()" class="btn btn-primary">Add Organization</button>
</div>
{{"Error:" + error}}

Answer 1

在控制器中调用 $http 后，您可以轻松地从 siteURL 获取所有组织，这里是工作代码： JS：

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

    app.controller('MainCtrl', function($scope, $http) {
            $http({
                method: 'GET',
                url: 'organizations.json',
                headers: {
                 withCredentials: true,
                 headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                 },
                })
                .then(function successCallback(data) {
                    $scope.organizations = data.data;
                    console.log($scope.organizations)

                }, function errorCallback(response) {
                    console.log(response);
                    console.log('error');
                });    
    });

HTML：

 <tbody>
        <tr data-ng-repeat="organization in organizations | filter:search" data-ng-click="editOrganization($index)">
            <td>{{organization.name}}</td>
        </tr>
    </tbody>

plunker：http://plnkr.co/edit/aP7fLU1tfWwmZdCAYzIf?p=preview

或者，如果你想通过工厂来做，你可以这样做：

app.controller('MainCtrl', function($scope, $http, factory) {

      factory.getOrganizations()
         .then(function(data){
            $scope.organizations = data.data;
                    console.log($scope.organizations)
         })
         .catch(function(){
         })
      });

app.factory('factory',function($http){
  return {
     getOrganizations: function(){
        return $http.get('organizations.json');
     }
  };
})

plunker：http://plnkr.co/edit/UJUrTIGHGtjjccGAnHlk?p=preview