由于某些 angularjs 问题，数据未显示在 html 文件中

Question

我必须使用 spring 和 angularjs 显示来自 mongodb 数据库的一些数据。数据被提取到 angular js 的 service.js 方法，但它没有显示到 html 文件中，因为它没有返回到控制器。

UserNotification.html

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Insert title here</title>
    </head>
    <body>
    <!--  <h2>Approve/Reject Pending Task</h2> -->
    <div class="row">
      <table class="table table-bordered">
        <thead>
            <tr>
            <th style="text-align: center;">Task name</th>
            <th style="text-align: center;">Owner name</th>
             <th style="text-align: center; width: 25px;">Approve</th>
            <th style="text-align: center; width: 25px;">Reject</th>
            </tr>
            </thead>
            <tbody>
                <tr ng-repeat="task in taskDetails">
                    <td>{{task.name}}</td>
                    <td>{{task.owners.ownerName.id}}</td>
                    <td  style="width:70px;text-align:center;"><button class="btn btn-mini btn-primary" ng-click="approveTask(taskDetails.indexOf(task), task)">Approve</button></td>
                    <td  style="width:70px;text-align:center;"><button class="btn btn-mini btn-danger" ng-click="rejectTask(taskDetails.indexOf(task), task)">Reject</button></td>
                </tr>

            </tbody>
      </table>
      </div>
    </body>
    </html>

controller.js

    releaseApp.controller('UserNotificationController', function($scope, $location, $http, UserNotificationService) {
        $scope.taskDetails = [];
        init();
        function init() {
            $scope.photos = UserNotificationService.getTask();
            console.log('inside controller: '+$scope.taskDetails);
        }
    });

service.js

    releaseApp.factory('UserNotificationService', function($http){
        var taskDetails = [];
        var factory = {};

        factory.getTask = function() {
             $http.get('userNotification/fetchTaskForApproval').success(function(data, status, headers, config) {
                photos = data;
                console.log('inside service method'+taskDetails);
                return taskDetails;
            });
        };
        return factory;
    });

// response i am getting in  chrome console :
//inside controller: undefined
//inside service method[object Object],[object Object]

Answer 1

你的工厂方法应该 return $http 使用 .then 承诺，这样承诺链将在控制器中继续

    factory.getTask = function() {
         return $http.get('userNotification/fetchTaskForApproval').then(function(response) {
            //photos = response.data;
            taskDetails = response.data;
            console.log('inside service method'+taskDetails);
            return taskDetails;
        });
    };

那么你的控制器方法就是

    function init() {
        UserNotificationService.getTask().then(function(data){
            //$scope.photos = data;
            $scope.taskDetails = data;
        });
        console.log('inside controller: '+$scope.taskDetails);
    }

Answer 2

用于调试目的（例如使用 console.log）：

以下连接将被解释为字符串：
console.log('inside service method' + taskDetails);

试试看您的对象 taskDetails 是否符合您的预期：
console.log('inside service method: ', taskDetails);

编辑：另外，请参阅此处了解一般串联信息 Javascript console.log(object) vs. concatenating string

GL!

由于某些 angularjs 问题，数据未显示在 html 文件中

Data not displaying in html file because of some angularjs issue

spring-mvc

mongodb

angularjs

angularjs-scope

angular-promise