Question

我有一个文字字段：

<input type="text" ng-model="user">

我有一个重定向到另一个页面的按钮。在该页面上，我想打印用户输入的用户名。我怎么能这样做？

我的偏好是离子。

Answer 1

ionic适用于angular。您可以通过多种方式实现此功能：

1）使用常量文件保存您的值

创建一个名为constants.js的文件，将其包含在index.html中：

<script src="Constants/Constants.js"></script>

将键值对组合声明为：

var url_config = {
      "USER_NAME" : "LOGIN_USER",
    };

在控制器文件中

，将USER_NAME值设置为：

url_config.USER_NAME = $scope.user; //the model variable name that you had used

使用此值，您要访问的位置为：

$scope.loggedInUser = url_config.USER_NAME; // you will get the value here

这里的缺点是，如果重新加载屏幕，该值将丢失。在使用phonegap创建的android或ios应用程序中可以忽略这一点，屏幕无法刷新，但如果您使用的是Web应用程序，则这不是一种值得推荐的方法。

2）使用服务传递常量

创建实用程序服务以保留变量

angular.module('myApp').service('UtilityService', function () {                
    this.USER_NAME  = '';
});

您可以在控制器中将其设置为：

angular.module('myApp')
.controller('LoginController', function ($scope, UtilityService) {
     UtilityService.USER_NAME   = $scope.user;
});

在您的其他控制器中访问它：

angular.module('myApp')
    .controller('UserController', function ($scope, UtilityService) {
         $scope.loggedInUser = UtilityService.user;
    });

这是一种可靠的方法和推荐的方法。

3）使用本地存储
您可以在此处使用本地存储的HTML5功能从浏览器的本地存储中访问该值。

将登录控制器中的值设置为：

angular.module('myApp')
    .controller('LoginController', function ($scope, $localStorage) {
         $localStorage.USER_NAME = $scope.loggedInUser;
    });

在接收控制器中，将其用作：

angular.module('myApp')
    .controller('UserController', function ($scope, $localStorage) {
         $scope.loggedInUser = $localStorage.USER_NAME;
    });

即使应用程序进入后台或退出，这也会涉及该值。除非您手动清除应用程序缓存或应用程序数据，否则将保存该值。

要访问$localStorage，您需要使用可以从github访问的ngStorage插件，并按照安装说明进行操作，然后将ngStorage注入： / p>

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

现在您已准备好使用$localStorage，前提是您已将其包含在您愿意访问它的控制器中。

4）使用会话存储
使用相同的ngStorage插件，您可以通过$sessionStorage使用会话存储。

将登录控制器中的值设置为：

angular.module('myApp')
    .controller('LoginController', function ($scope, $sessionStorage) {
         $sessionStorage.USER_NAME = $scope.loggedInUser;
    });

在接收控制器中，将其用作：

angular.module('myApp')
    .controller('UserController', function ($scope, $sessionStorage) {
         $scope.loggedInUser = $sessionStorage.USER_NAME;
    });

会话存储使数据在会话中保持有限时间后过期。这种用法建议用于访问令牌等功能。对于这种用户名的情况，这不是推荐的方法

Answer 2

实现这一目的主要有两种方法：

1.使用常量

<强> app.js

angular.module('ionicApp', ['ionic'])
    .constant('appConstant', {
        user: ''
    })

<强>控制器

angular.module('ionicApp.home', ['ionic'])
    .controller('homeCtrl', ['$state', 'appConstant', function($state, appConstant) {
        'use strict';
        $scope.user = '';
        $scope.onClick = function() {

            appConstant.user = $scope.user;
        };
    }]);

<强> HTML

<input type="text" ng-model="user">
<button ng-click="onClick()">Submit</button>

现在，您将使用appConstant.user

从任何控制器获取用户名

2.使用localstorage

<强>控制器

angular.module('ionicApp.home', ['ionic'])
    .controller('homeCtrl', ['$state', '$localStorage', function($state, $localStorage) {
        'use strict';
        $scope.user='';
        $scope.onClick = function() {
          $localStorage.set('user', user);
        };
    }]);

<强> HTML

<input type="text" ng-model="user">
<button ng-click="onClick()">Submit</button>

现在，您将使用$localStorage.get('user')

从任何控制器获取用户名

如何存储usrename并让它随处可访问？

2 个答案: