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

【问题标题】：Data not displaying in html file because of some angularjs issue由于某些 angularjs 问题，数据未显示在 html 文件中
【发布时间】：2015-05-14 14:01:24
【问题描述】：

我必须使用 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]

【问题讨论】：

我假设您已经在 html 中添加了 ng-app 和 ng-controller ...以及引用 js 文件 ...
console.log('inside controller: '+$scope.photos);
你没有推送任务详情
JqueryKing : 我确实在 console.log('inside controller: '+$scope.photos);但我得到的回应是一样的。
我是 angularjs 新手，所以请告诉我如何推送任务详情。从过去 1 周开始，我就陷入了困境。

标签： angularjs mongodb spring-mvc angularjs-scope angular-promise

【解决方案1】：

您的工厂方法应该使用.then 返回$http 承诺，以便承诺链将在控制器中继续

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

【讨论】：

现在我在控制台“内部控制器：[object Object]”中得到这个，但它仍然没有显示在 html 页面中。
@Girish 你能告诉我console.log('inside service method: ', taskDetails); 包含什么
实际上我从 mongodb 获取了两个对象，因此它包含“内部服务方法[object Object]，[object Object]”。像这样： Object { id="550994e21cba9597624195aa", name="Deploy Renderer Code", team={...}, more...} 这是一个对象。像这样还有一个对象。所以服务方法返回两个对象
所以你需要看看它......并正确绑定它们，例如。如果你有像{id="550994e21cba9597624195aa", name="Deploy Renderer Code", taskDetails={...}, photos: {}, more...} 这样的对象，那么你可以做$scope.taskDetails = data.taskDetails & 对于照片，它会是$scope.photos= data.photos
我需要在哪里进行数据绑定？请告诉.. 我是 angularjs 的新手

【解决方案2】：

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

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

试试这个，看看你的对象 taskDetails 是否是你所期望的：
console.log('inside service method: ', taskDetails);

编辑：另外，请参阅此以获得一般连接信息Javascript console.log(object) vs. concatenating string

GL！

【讨论】：