Arhn - архитектура программирования

Данные не отображаются в html-файле из-за проблемы с angularjs

Мне нужно отобразить некоторые данные из базы данных mongodb, используя spring и angularjs. Данные извлекаются методом service.js angular 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]
spring-mvc mongodb angularjs angular-promise angularjs-scope
14.05.2015

  • Я предполагаю, что вы добавили ng-app и ng-controller в свой html... а также ссылаетесь на файлы js... 14.05.2015
  • console.log('внутри контроллера: '+$scope.photos); 14.05.2015
  • вы не нажали детали задачи 14.05.2015
  • JqueryKing: я изменил в console.log('внутренний контроллер:'+$scope.photos); но это тот же ответ, который я получаю. 14.05.2015
  • Я новичок в angularjs, поэтому, пожалуйста, скажите мне, как отправить детали задачи. Я застрял в этом с прошлой 1 недели. 14.05.2015

Ответы:


1

Фабричный метод должен возвращать $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);
    }
14.05.2015
  • Теперь я получаю это в консоли внутри контроллера: [object Object], но он все еще не отображается на html-странице. 14.05.2015
  • @Girish, не могли бы вы сказать мне, что содержит console.log('inside service method: ', taskDetails);, сделав это 14.05.2015
  • На самом деле я получаю два объекта из mongodb, поэтому он содержит внутри метод службы [объект объекта], [объект объекта]. например: Object {id=550994e21cba9597624195aa, name=Deploy Renderer Code, team={...}, more...} это один объект. Так же есть еще один объект. Таким образом, метод службы возвращает два объекта 14.05.2015
  • поэтому вам нужно взглянуть на это ... и правильно связать их, например. Если у вас есть объект типа {id="550994e21cba9597624195aa", name="Deploy Renderer Code", taskDetails={...}, photos: {}, more...}, вы можете сделать $scope.taskDetails = data.taskDetails, а для фотографий это будет $scope.photos= data.photos 14.05.2015
  • Где мне нужно сделать эту привязку данных? Пожалуйста, скажите .. Я новичок в angularjs 14.05.2015
  • внутри UserNotificationService.getTask().then(function(data){//$scope.photos = data;$scope.taskDetails = data;}); блока кода 14.05.2015
  • Вы ввели $scope на свой контроллер 14.05.2015
  • Это код контроллера: releaseApp.controller('UserNotificationController', function($scope, $location, $http, UserNotificationService) { $scope.taskDetails = []; init(); function init() { $scope.taskDetails = UserNotificationService .getTask(); console.log('внутри контроллера: '+$scope.taskDetails); } }); 15.05.2015
  • @Girish делает то, о чем я упоминал в ответе. Функция инициализации будет function init() {UserNotificationService.getTask().then(function(data){//$scope.photos = data;$scope.taskDetails = data;});console.log('inside controller: '+$scope.taskDetails);}.. Вы не можете внедрить контроллер внутри фабрики. 15.05.2015

    • 2

    для целей отладки (например, с помощью console.log):

    следующая конкатенация будет интерпретирована как строка:
    console.log('inside service method' + taskDetails);

    попробуйте это, чтобы увидеть, является ли ваш объект, taskDetails, тем, что вы ожидают, что это будет:
    console.log('inside service method: ', taskDetails);


    РЕДАКТИРОВАТЬ: кроме того, см. это для общей информации о конкатенации Javascript console.log(object) и объединяющая строка

    GL!

    14.05.2015
    Новые материалы
    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..