Angular双向数据绑定问候语

Question

抱歉，这可能是一个非常基本的问题。我正在用 angular 制作一个小的演示测验项目。在第一页上，我有一个基本的双向数据绑定问候语（即你在一个框中输入你的名字，它欢迎用户，例如 <p> Welcome {{name}} </p>

如何保存输入的姓名并将此欢迎词带到下一个page/template？这是代码

<strong>Welcome</strong> {{email}}

  <p class="lead">Please enter your name </p>
      <body ng-app ng-init="email = 'John';">
      <label>enter name<input type="text" ng-model="firstName"/></label><br />
  </body>

这是我的路线

'use strict';


angular
  .module('angularQuizApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl'
      })
      [...]

我从一个 yeoman angular 脚手架开始，所以只改动了很少的代码。提前谢谢各位好心的angular大侠

Answer 1

为了轻松实现您的愿望，您可以创建一个保留用户名的服务：

angular.module('angularQuizApp').
 factory('StorageService',[
function(){

    var name = "";

    var _setName  = function(name){
        name = name;
    }:

    var _getName = function(){
        return name;
    };  

    return {
        setName : _setName,
        getName : _getName,
    }



}]);

然后在您的控制器中，从服务中调用正确的方法：

angular.module('angularQuizApp').
controller('MyController', ['$scope', 'StorageService',
   function($scope, StorageService) {
     $scope.name = StorageService.getName(); // or setName(name_value)
}]);

通过这种方式，该服务通过您的 angular 应用保留用户的姓名。在此服务中，您可以保存任何内容。但是如果你退出应用程序，这个 object/name 将被销毁。

如果你想持久保存对象，请查看 angular-storage ：https://github.com/grevory/angular-local-storage

编辑

这是我制作的功能性应用程序： http://plnkr.co/edit/7ZzBYnKmV1xflzi81YQc?p=preview

Angular双向数据绑定问候语

Angular two way data binding greeting

javascript

angularjs

javascript-databinding

angularjs-directive