Как реализовать вызов ajax, используя обещание с угловым?

Question

Я пытаюсь использовать угловое обещание, используя $ q, который завернут в «службу» и вызовет его из моего контроллера. Вот код:

var myController = function ($scope, myService) { 
    $scope.doSomething = function (c, $event) { 
     $event.preventDefault(); 
     myService.method1(c).then(function (rslt) { 
      alert(rslt); 
     }, function (err) { 
      alert(err); 
     }).then(function() { 
      //clean up 
     });   
    }; 
}; 
var myApp = angular.module('myApp', []) 
    .factory('myService', function($q) { 
     function _method1(c) { 
      var dfr = $q.defer(); 

      var dt = { sc: c }; 
      $.ajax({ 
       type: "POST", 
       url: "mypage.aspx/mymethod", 
       data: JSON.stringify(dt), 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       success: function() { 
        dfr.resolve('actions sucess'); 
       }, 
       error: function (msg) { 
        dfr.reject(msg); 
       } 
      }); 
      return dfr.promise; 
     } 
     return { method1: _method1 }; 
    }).controller('myController', myController); 

Проблема заключается в том, что 'тревога (Rslt);' кусок кода никогда не выполняется. Служба вызывается и данные обновляются, но первая функция «тогда» не достигается при первом нажатии.

Что я делаю неправильно? Любая помощь приветствуется.

Answer 1

Просто добавьте зависимость к $rootScope и вызвать $rootScope.$apply() в обоих обратных вызовов из $.ajax():

success: function() { 
    dfr.resolve('actions sucess'); 
    $rootScope.$apply(); 
}, ... 

Но еще лучше, используйте Angular's $http service.

Answer 2

Я бы recoomend вам использовать $http и $resource вместо $.ajax

Heres пример $http

myApp.factory('MyService', 
[ 
    '$http', 
    '$q', 
    '$resource', 
function (
    $http, 
    $q, 
    $resource 
) { 
    return { 
     doSomething : function (somedata) { 
      var deferred = $q.defer(); 

      $http({ method: 'POST', url: '"mypage.aspx/mymethod"', data: somedata }). 
       success(function (data, status, headers, config) { 
        deferred.resolve(true); 
       }). 
       error(function (data, status, headers, config) { 
        deferred.resolve(false); 
       }); 
      return deferred.promise; 
     } 
    }; 
}]);