Угловое двустороннее приветствие привязки данных

Question

Угловое двустороннее приветствие привязки данных

0

Извинения за то, что, вероятно, очень простой вопрос. Я делаю небольшой проект демо-викторины с угловатым. На первой странице у меня есть базовое двухстороннее приветствие привязки данных (т.е. Вы вводите свое имя в поле и приветствуете пользователя, например <p> Welcome {{name}} </p>

Как сохранить введенное имя и перенести этот прием на следующую страницу/шаблон? Вот код

<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'
      })
      [...]

Я начал с yoman угловой эшафот, так что изменили очень мало кода. Благодарим вас за добрые угловые волшебники

Mobeale 27 июнь 2015, в 14:30

Источник

Теги:

javascript

angularjs

angularjs-directive

javascript-databinding

1 ответ

Ещё вопросы

Romf7890 · Accepted Answer · 2015-06-27T10-22-00.000Z

Чтобы добиться того, чего вы хотите легко, вы можете создать службу, которая хранит имя пользователя:

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

Таким образом, эта служба сохраняет имя пользователя через ваше угловое приложение. В рамках этой службы вы можете сохранить все, что захотите. Но этот объект/имя будет уничтожен, если вы покинете приложение.

Если вы хотите постоянно сохранять объекты, посмотрите на угловое хранилище: https://github.com/grevory/angular-local-storage

РЕДАКТИРОВАТЬ

Вот функциональное приложение, которое я сделал: http://plnkr.co/edit/7ZzBYnKmV1xflzi81YQc?p=preview

Вы также можете сохранить такие важные значения в $ rootScope.
К сожалению, не смог заставить это работать, чувак :( Двухстороннее связывание работало нормально, но оно не сохранило значение на следующей странице
Мариус, спасибо большое, чувак! Plnkr сделал это красиво и ясно