通过控制器从服务中的成功调用传递变量以查看

Question

在我的 ui-bootstrap 模态中，我有 3 个 modal-body div。

<div class="modal-body" ng-show="$ctrl.selected.item == 'registration'">...</div>
<div class="modal-body" ng-show="$ctrl.selected.item == 'thanks'">...</div>
<div class="modal-body" ng-show="$ctrl.selected.item == 'error'">...</div>

通过更改 $ctrl.selected.item，我在模态 window 中更改了 HTML。现在我需要在 registerService 中更改这个变量（确实是对象的属性），它被注入到 registerwindow' 控制器中。

app.service('registerService', ['$http', 'localStorageService', function ($http, localStorageService) {
this.registerUser = function (registerInfo) {

    $http({
        url: 'http://localhost:3000/v1/sign_up',
        headers: {
            'Content-Type' : 'application/json'
        },
        method: 'POST',
        data: {
            email: registerInfo.email,
            nick: registerInfo.nick,
            password: registerInfo.password,
            password_confirmation: registerInfo.password_confirmation
        }
    })

    .then(function successCall(response) {
        console.log('user added'); // delete it
        $ctrl.selected.item = $ctrl.items[1];

    }, function errorCall(respone) {
        console.log('error callback register ');
        console.log(respone.data);
        $ctrl.selected.item = $ctrl.items[2];
    })


};
}]);

$ctrl.selected.item = $ctrl.items[1]; 这种方法显然行不通。我该怎么做？我不知道我需要异步执行此操作。

Answer 1

您或许可以使用 Angular 的 $q 服务来处理这个问题。该服务的方法如下所示：

this.registerUser = function (registerInfo) {

var deferred = $q.defer();

$http({
    url: 'http://localhost:3000/v1/sign_up',
    headers: {
        'Content-Type' : 'application/json'
    },
    method: 'POST',
    data: {
        email: registerInfo.email,
        nick: registerInfo.nick,
        password: registerInfo.password,
        password_confirmation: registerInfo.password_confirmation
    }
})

.then(function successCall(response) {
    console.log('user added'); // delete it
    //$ctrl.selected.item = $ctrl.items[1];
    deferred.resolve(); //Resolve the promise - success
}, function errorCall(respone) {
    console.log('error callback register ');
    console.log(respone.data);
    //$ctrl.selected.item = $ctrl.items[2];
    deferred.reject(); //Reject the promise - failure
});

return deferred.promise;
};

记得在你的服务中注入$q！

在你的控制器中，你会像这样调用你的服务方法，然后在 .then 和 .catch:

中调整范围变量

registerService.registerUser(registerInfo)
   .then(function() {
       $scope.selected.item = $scope.items[1];
       //Not sure what your controller looks like, you may be using controllerAs, so this will be a bit different
   })
   .catch(function() {
       $scope.selected.item = $scope.items[2];
   });

通过控制器从服务中的成功调用传递变量以查看

Passing variable from success call in service through controller to view

service

scope

call

angularjs