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

Posted 2023-05-08

【中文标题】AngularJS 工厂和控制器代码，不产生任何东西

【英文标题】：AngularJS factory and controller code, not producing anything

【发布时间】：2019-05-20 05:40:29

【问题描述】：

当下面的代码运行时，我的控制台中没有任何显示表明出现任何问题，但正如您在 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

【问题讨论】：

$http 服务不是jQuery.ajax。阅读AngularJS $http Service API Reference - General Usage。

【参考方案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

【讨论】：

你为什么有async: false？ $http 服务忽略该属性是一件好事。

@georgeawg 嗯，是的，你是对的。我只是不小心从 Darkmatter5 代码中复制了它

太棒了，但是当我像这样在 SharePoint 数据上运行它时，它不想解析数据，因为返回的结果不是数组。

忽略，我做了“$scope.organizations = data.data.d.results;”现在它可以工作了。

@Darkmatter5 竖起大拇指！