如何将值从localStorage传递到输入字段

时间:2014-11-26 07:08:06

标签: javascript jquery angularjs

我试图将localStorage传递给输入字段,但我无法传递值,我没有到达我出错的地方,请帮我解决这个问题,还有一件事如何在控制器外调用angularjs函数。感谢任何帮助人员。

HTML

<div class="modal__content" ng-controller="joinctrl">
        <form novalidate>
        <input type="email" placeholder="Email" ng-model="email"><br />
        <input type="password"  placeholder="Password" ng-model="password"><br />
        <input type="password"  placeholder="Confirm Password" ng-model="cpassword"><br />
        <input type="submit" value="Create" class="creat" ng-click="create()">
        </form>
</div>

JS

preauth();
function preauth() {
    var user_login = window.localStorage.getItem('email');
    var pass_login = window.localStorage.getItem('password');
    if(user_login != undefined && pass_login != undefined) {
        alert(user_login);
        document.getElementById("email").value=user_login;
        document.getElementById("password").value=pass_login;
        angular.element(document.getElementById('loginctrl')).scope().Login();
    }
}
var app = angular.module('contol', ['onsen']);

app.controller('loginctrl', function($scope, $http){
    $scope.login=function(){
        if (!$scope.email || !$scope.password){
            alert("Please Fill Email & Password");
        }
        else{
            var request=$http({
                method:"post",
                url:"http://www.example.com/login.php",
                dataType: "json",
                data:{
                    email:$scope.email,
                    password:$scope.password
                },
                headers:{'Content-Type':'application/x-www-form-urlencoded'}
            });
        request.success(function(retmsg){
            if(parseInt(retmsg.status)==0)
            {
                alert(retmsg.txt);
            }
            else if (parseInt(retmsg.status)==1)
            {
                window.localStorage.setItem('email', $scope.email);
                window.localStorage.setItem('password', $scope.password);     
                myNavigator.pushPage('home.html');
            }
        });
        }
    };
});

2 个答案:

答案 0 :(得分:3)

这可能很有用,将其存储在变量中并使用它,并且只有id名称不是#password

 var x = document.getElementById("password").value = "Password";
 alert ("The value was changed to: " + x);

答案 1 :(得分:1)

在Angular应用程序中,您应该在模块中编写所有代码。否则,您不使用Angular的一个有用功能:模块化。

例如:

app.factory("LocalStorage", function() {
    var LS = {};
    LS.getItem = function(key) {
        return localStorage[key];
    };
    LS.setItem = function(key, value) {
        localStorage[key] = value;
        return value;
    };

    return LS;
});
app.controller('loginctrl', function($scope, $http, LocalStorage) {
    $scope.email = LocalStorage.getItem('email');
    $scope.password = LocalStorage.getItem('password');

    $scope.login = function() {
        // code...
        // I'd rather to create another service "Api" or "Request", like this:
        return Api.doAuth($scope.login, $scope.password).then(function(res) {
            // For example, service `Request` write to `LocalStorage` status of current authentication.
            if(res) {
                myNavigator.pushPage('home.html');
            }
        });
    };
});

你不应该在外部应用程序中调用函数(从Angular的哲学角度来看它是不正确的)。但是,你写的可能是正确的:

// get our scope:
var scope = angular.element(document.getElementById('loginctrl')).scope();
// and call our function in the scope:
scope.login();

但是你需要在Angular的bootstrap之后执行代码。 此外,您可以使用Angular的服务执行任何功能。

//find the `ng:app` element and get injector.
var injector = angular.element('body').injector();
//execute our own function with any services
injector.invoke(function($rootScope, $http, LocalStorage) {
    $http.get('/foo.php').then(function(res) {
        LocalStorage.setItem('answer', res);
    });
    $rootScope.bar = 1;

});