簡體   English   中英

AngularJS:如何從工廠獲取返回值

[英]AngularJS : How to get returned value from factory

我在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,然后將來將其發送到登錄服務或任何其他服務(甚至控制器)?

在此先感謝您的時間和建議。

為了從該函數返回數據,您應該返回$http.get已經返回的$http.get對象。

我想指出的另一件事是,在創建依賴於控制器作用域的服務時,將$ 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;
        });
    }
}

login服務

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM