AngularJS：如何从工厂获取返回值

Wolf 发表于 Dev

狼

我在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>

主要js：

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;
                }
            });
        }
    }
});

这是我的控制器：

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

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

我需要在控制器中执行什么操作才能实际返回url，然后将来将其发送到登录服务或任何其他服务（甚至控制器）？

在此先感谢您的时间和建议。

Pankaj Parkar

为了从函数中返回数据，您应该返回$http.get已经返回的Promise对象。

我想指出的另一件事是，在创建依赖于控制器作用域的服务时，将$ scope传递给服务会违反单例规则。服务应该只接受参数并通过处理它返回结果，而没有别的。

代码

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;
        });
    }
}

LoginService

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;
            });
        }
    }
});

控制器

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;
     }); 
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。