javascript - Angular : How to get returned value from factory

Question

我是 AngularJS 的新手，我遇到了以下问题:

查看:

<div>
    <form role="form" name="loginForm" class="form-horizontal login-form">
        <div class="form-group">
            <p class="login-form-msg">Welcome : {{user.username}}</p>
            <label for="inputUserName" class="col-sm-2 control-label login-form-label">Base</label>
            <div class="col-sm-10">
                <input type="text" placeholder="Enter base" class="form-control" required ng-model="user.code">
            </div>
        </div>
        <div class="form-group">
            <label for="inputUserName" class="col-sm-2 control-label login-form-label">Username</label>
            <div class="col-sm-10">
                <input type="text" placeholder="Enter name" class="form-control" required ng-model="user.username">
            </div>
        </div>
        <div class="form-group">
            <label for="inputPassword" class="col-sm-2 control-label login-form-label">Password</label>
            <div class="col-sm-10">
                <input type="password" placeholder="Password" id="inputPassword" class="form-control" required ng-model="user.password">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10 login-form-button">
                <button class="btn btn-default" type="submit" ng-disabled="loginForm.$invalid" ng-click="login(user)">Sign in</button>
            </div>
            <p class="login-form-msg">{{msgtxt}}</p>
        </div>
    </form>
</div>

主要代码:

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

myApp.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/login', {
        templateUrl: 'partials/login.html',
        controller:'loginCtrl'
    });
    $routeProvider.when('/welcome', {
        templateUrl: 'partials/welcome.html',
        controller:'loginCtrl'
    });
    $routeProvider.otherwise({ redirectTo: '/login' });
}]);

我有以下工厂:

myApp.factory('getURLService', function ($http, config) {
    return {
        getURL: function (user,scope) {
            $http.get(config.backend + "/Device/GetURLbyCode", {
                params: { code: user.code }
            })
            .success(function (data) {
                var url = '';
                if (data.status == 'succ') {
                    url = data.Result;
                }
                else {
                    scope.msgtxt = data.msg;
                }
                return url;
            });
        }
    }
});

我需要在其他工厂中使用这个工厂的返回值。

例如在我的登录工厂中:

myApp.factory('loginService', function ($http, $location, config) {
    return {
        login: function (user,url,scope) {

            $http.get(url + "/Device/Register", {
                params: { userName: user.username, password: user.password }
            })
            .success(function (data) {
                if (data.status == 'succ') {
                    $location.path('/welcome');
                }
                else {
                    scope.msgtxt = data.msg;
                }
            });
        }
    }
});

这是我的 Controller :

myApp.controller('loginCtrl', function ($scope, getURLService, loginService) {
    $scope.msgtxt = '';

    $scope.login = function (user) {
        loginService.login(user,url,$scope); //call login service
    }
});

我需要在我的 Controller 中做什么才能实际返回 url，然后将其发送到登录服务或将来的任何其他服务(甚至 Controller )？

提前感谢您的宝贵时间和建议。

Answer 1

要从函数返回数据，您应该返回 $http.get 已经返回它的 promise 对象。

我想指出的另一件事是，将 $scope 传递给服务违反了单例规则，因为您正在创建一个依赖于 Controller 范围的服务。服务应该只接受参数并通过处理返回结果，没有别的。

代码

return {
    getURL: function (user,scope) {
        return $http.get(config.backend + "/Device/GetURLbyCode", {
            params: { code: user.code }
        })
        .then(function (res) {
            var data = res.data;
            var url = '';
            if (data.status == 'succ') {
                url = data.Result;
            }
            else {
                scope.msgtxt = data.msg;
            }
            return url;
        });
    }
}

登录服务

myApp.factory('loginService', function ($http, $location, config) {
    return {
        login: function (user,url) {

            return $http.get(url + "/Device/Register", {
                params: { userName: user.username, password: user.password }
            })
            .then(function (response) {
                var data = response.data;
                if (data.status == 'succ') {
                    $location.path('/welcome');
                    return;
                }
                return data.msg;
            });
        }
    }
});

Controller

getURLService.getURL(user).then(function(url){
     //assuming you already having value of user available here
     loginService.login(user,url).then(function(message){ //call login service
         if(message)
            $scope.msgtxt = message;
     }); 
});