2015-05-20 5 views
0

Я обращаюсь к вам, чтобы получить помощь по проблеме $ обещание с AngularJS.Угловой JS успех обратный вызов

Вот информация документация на $ ресурсе, и это будет применимо к $ HTTP, а также

link

Сказав, что я пытаюсь сделать вызов API и успеха требуется выполнить обратный вызов действие. Поскольку операция выполняется асинхронно, действие обратного вызова происходит еще до завершения завершения вызова API. Это приводит к некорректному отражению данных. Вот простой пример, используя $ resource и $ http. В обеих случаях фактическое ожидание, что лог консоли должен показать фактические данные, но он показывает данные обещания и в результате функции обратного вызова вызывался даже до того, как API вызовы получить завершено

$http.get('../../../Employee/GetEmployees').success(function (data) { 
     console.log(data); 
    }); 


    return $resource('../../../Employee/GetEmployees', {}, 
     { 
      query: { method: 'GET', isArray: true }, 
     }); 

я представил пример просто для получения четкой картины, но моя фактическая проблема связана с «PUT» (Update). Согласно логике, обновление должно проходить сначала через вызов API, а затем страница должна быть перенаправлена ​​на страницу списка, где будут обновляться и обновляться обновленные данные. Любые рекомендации по этому вопросу будут очень признательны.

$scope.UpdateEmp = function() { 
     var empl = $scope.Employee; 
     empFactory.empUpdate.update({ EmpID: $routeParams.EmpID, empval: empl }).$promise.then(function() { // update method in my resource uses $resource 
      $location.path('/EmpList'); //redirect to list 
     }); 

P.S: Для поры до времени, пожалуйста, оставьте о URL, пожалуйста, представить его в качестве API, который возвращает объект JSON.

Вот полный код

Вот полный код.

Routing:

var myApp = angular.module('myApp', ['emp', 'ngRoute']); 

myApp.config(function ($routeProvider) { 

    $routeProvider 
     .when('/', 
     { 
      templateUrl: 'pages/EmpList.html', 
      controller: 'empController' 
     } 
     ) 
    .when('/EmpDetail/:EmpID', 
    { 
     templateUrl: 'pages/EmpDetail.html', 
     controller: 'empDetailController' 
    } 
) 
    .when('/EmpList', 
    { 
     templateUrl: 'pages/EmpList.html', 
     controller: 'empController' 
    } 
    ) 
    .when('/EmpCreate', 
    { 
     templateUrl: 'pages/EmpCreate.html', 
     controller: 'empCreateController' 
    }); 

}); 

Вот метод контроллера

myApp.controller('empController', function ($scope, $routeParams, $location, empFactories, empFactory, $http, empHttpFactory) { 

      $scope.Employees = empFactories.query(); 

      $scope.edit = function (EmpID) { 
      $location.path('/EmpDetail/' + EmpID); 
     }; 


     $scope.Delete = function (empID) { 
      empFactory.empDelete.del({ EmpID: empID }, function() { 
       $location.path('/EmpList'); 
      }); 
     } 

     $scope.Createnew = function() { 
      $location.path('/EmpCreate'); 
     } 


    }); 

    myApp.controller('empDetailController', function ($scope, empFactory,empFactories, $routeParams, $location) { 

     $scope.Employee = empFactory.employee.show({ EmpID: $routeParams.EmpID }); 

     console.log($scope.Employee); 

     $scope.UpdateEmp = function() { 
      var empl = $scope.Employee; 
      empFactory.empUpdate.update({ EmpID: $routeParams.EmpID, empval: empl }).$promise.then(function() { // update method in my resource uses $resource 
       $location.path('/EmpList'); //redirect to list 
      }); 

     }; 

    }); 

Here is the service 

var myservice = angular.module('emp', ['ngResource', 'ngRoute']); 
myservice.factory('empFactories', function ($resource) { 
    return $resource('../../../Employee/GetEmployees', {}, 
     { 
      query: { method: 'GET', isArray: true }, 
      create: { method: 'POST' } 
     }); 
}); 

myservice.factory('empFactory', function ($resource) { 



    //return $resource('../../Employee/GetEmployee/:EmpID', { EmpID: '@EmpID' }, 
    //  { 
    //   show: { method: 'GET' } 
    //  }); 


    var resource = { 
     employee: 
      $resource('../../Employee/GetEmployee/:EmpID', { EmpID: '@EmpID' }, 
      { 
       show: { method: 'GET' } 

      }), 
     empUpdate: 
      $resource('../../Employee/PutEmployee/:EmpID', { EmpID: '@EmpID', empval: '@empl' }, { update: { method: 'PUT', isArray: true } }), 
     empDelete: 
      $resource('../../Employee/DeleteEmployee/:EmpID', { EmpID: '@EmpID' }, { del: { method: 'DELETE', isArray: true } }), 

     empCreate: 
      $resource('../../Employee/CreateEmployee', { empval: '@empl' }, { create: { method: 'POST', isArray: true } }) 
    } 

    return resource; 
}); 
+0

возможность отправлять полный код или проверить запрос & ответ от инструментов разработчика Вы? Мне было странно, что успех заработал до получения ответа. – kwangsa

+0

Для метода get я проверяю в консоли консоли разработчика инструменты .. Для метода Put, как я уже сказал, ожидалось, что «перенаправление должно произойти после обновления». Я использовал аналогичное условие onsuccess для Put так же хорошо, как вы могли видеть в моем примере – TechQuery

+0

Я знаю, что вы пытаетесь держать вопрос кратким, но мне трудно понять, как вызов '$ http' связан с' return $ resource() '- это просто альтернативы в вашем API? И как оба связаны с вызовом, сделанным в функции «UpdateEmp» –

ответ

0

Сначала я вижу проблему дизайна, ваш завод не должен возвращать ресурсы, должны возвращать обещания,

myservice.factory('empFactory', function ($resource) { 

    var employeeResource = $resource('../../Employee/GetEmployee/:EmpID', { EmpID: '@EmpID'}, {show: { method: 'GET' } }), 
    updateResource = $resource('../../Employee/PutEmployee/:EmpID', { EmpID: '@EmpID', empval: '@empl' }, { update: { method: 'PUT', isArray: true } }), 
    deleteResource = $resource('../../Employee/DeleteEmployee/:EmpID', { EmpID: '@EmpID' }, { del: { method: 'DELETE', isArray: true } }), 
    createResource = $resource('../../Employee/CreateEmployee', { empval: '@empl' }, { create: { method: 'POST', isArray: true } }); 

    return { 
    getEmployee: function(id){ 
     return employeeResource.get({EmpID: id}).$promise; 
    }, 
    updateEmployee: function(){ 
     return updateResource.update(...).$promise; 
    } 
    }; 
}); 

Я думаю, что проблема в том, что вы звоните

$scope.Employee = empFactory.employee.show({ EmpID: $routeParams.EmpID }); 

Это возвращает ресурс прямо сейчас, поэтому вы технически не получаете сотрудника в любом месте. Не совсем понятно, где ошибка, пытаетесь ли вы выполнить несколько запросов ресурсов параллельно? если это его использовать $q.all([asyncCall1,asyncCall2,...]).spread(function(r1, r2, ...) {...});

С уважением

+0

проблема с моей операцией обновления, $ scope.UpdateEmp = function() { var empl = $ scope.Employee; 0: empFactory.empUpdate.update ({EmpID: $ routeParams.EmpID, empval: empl}). $ Prom.then (function() {// метод обновления в моем ресурсе использует $ resource $ location.path ('/ EmpList'); // перенаправлять в список }); Вот и раньше, я получаю ответ, перенаправление происходит – TechQuery

+0

Как вы узнали, что «ответа еще нет»? Вы не получаете параметр в '$ prom.then (function (response) {... // redirect})' Вы не используете ответ, или вы ловите результат где-то еще? – Matho

+0

Хорошо. Я делаю обновление моей модели в вызове обновления. и когда происходит перенаправление, я ожидал, что он запросит обновленную модель и вернет ее. Когда страница перенаправляется, моя коллекция моделей запрашивается и заполняет страницу списка. – TechQuery

0

С $ ресурсом вы определяете маршрут API и параметры АНИ необходимые для того, чтобы обработать запрос. Затем, позже вам нужно будет предоставить $ resource данные и выполнить действие (получить, сохранить, запросить, удалить, удалить).

Я лично предпочитаю работать с $ http, поскольку он довольно разрезан и сух. В нижней части вы не можете заранее определить маршруты и параметры в своем приложении.

Вот ручка, которая показывает вам как $ resource, так и $ http-запросы.

http://codepen.io/kenhowardpdx/pen/BNzXeE

angular.module('app', ['ngResource']); 

MyService.$inject = ['$http', '$resource']; 
function MyService ($http, $resource) { 
    var _this = this; 

    var Search = $resource('http://www.omdbapi.com/?tomatoes=true&plot=full&t=:searchTerm', {searchTerm:'@searchTerm'}); 

    _this.httpSearch = function (searchTerm) { 
     return $http.get('http://www.omdbapi.com/?tomatoes=true&plot=full&t=' + searchTerm); 
    }; 

    _this.resourceSearch = function (searchTerm) { 
     return Search.get({searchTerm: searchTerm}).$promise; 
    } 
} 

angular.module('app').service('MyService', MyService); 

MyController.$inject = ['MyService']; 
function MyController (MyService) { 
    var _this = this; 

    _this.type = 'http'; 

    _this.searchFilms = function() { 
     if (_this.type === 'http') { 
      MyService.httpSearch(_this.searchTerm).then(function(_response) { 
       _this.results = _response.data; 
      }); 
     } else { 
      MyService.resourceSearch(_this.searchTerm).then(function(_response) { 
       _this.results = _response; 
      }); 
     } 
    } 
} 

angular.module('app').controller('MyController', MyController);` 
0

завод не нужно возвращать promise.I означает, что зависит от того, как управлять фабрикой и контроллеры, и как вы собираетесь решить.

Ваш завод не возвращает обещание, кроме ресурса, поэтому его необходимо решить в вашем контроллере. Ваш метод обновления в контроллере должен быть таким:

$scope.UpdateEmp = function() { 
    var empl = $scope.Employee; 
    empFactory.empUpdate.update({ EmpID: $routeParams.EmpID, empval: empl }, function (successResponse) { // update method in my resource uses $resource 
     $location.path('/EmpList'); //redirect to list 
    },function (error) { 
    // do something on error callback 
    }); 

чтения о angularjs ресурса angularjs docs about $resource

+0

Спасибо @konammagari. Проблема здесь в том, что она не вызывает вызовы для моего контроллера API для получения обновленного списка сотрудников. Только в первый раз, вызов сделан для получения данных и от следующего вызова к моему контроллеру API, управление не собирается получать обновленный список. – TechQuery

+0

. См. Ответ от Matho в следующем разделе ответа. Я занимаюсь тем же вопросом, что и он. Кроме того, если вы поделитесь своим ID/номер телефона электронной почты, было бы здорово связаться с вами для угловых запросов – TechQuery

+0

Спасибо @ Konammagari – TechQuery