Связывание данных между страницами в Angularjs

Question

Я пытаюсь понять привязку данных в Angularjs.

Что я хочу сделать, это установить привязку между страницами, если я изменил вход на first.html, данные должны автоматически меняться во втором .html.

Например, Это first.html:

<div ng-controller="MyCtrl"> 
    <input type="text" ng-model="value"/><br> 

    {{value}} 

<a href="#/second"><input type="submit" value="Second page"/></a> 
</div> 

и сказать second.html только этот кусок кода {{значение}}.

и в файле .js у нас есть $ routeProvider, который принимает шаблон url как 'second.html' & Контроллер - это 'MyCtrl'.

Так контроллер:

MyApp.controller(function($scope){ 

$scope.value="somevalue"; 

}) 

Делая выше способ {{значение}} на second.html является получение значения "SomeValue". Что происходит от контроллера.

Но если я изменяю динамическое значение ввода, которое находится на first.html, значение на second.html не получает это значение.

Мой вопрос в том, как я могу привязать значение на second.html с first.html автоматически.

Чтобы понять вопрос ясно, Предположим, есть введенное поле ввода текста и кнопка отправки на first.html, затем я хочу получить значение ввода текстового поля first.html на second.html на странице Отправить.

Answer 1

Я нашел решение для того, что я искал. Решение находится в Angular docs, вот ссылка http://docs.angularjs.org/cookbook/deeplinking.

Некоторая часть примера на этой ссылке отвечает на мой вопрос.

Answer 2

Если вы приложите свои данные $ rootScope если выживут переходы между контроллерами и быть частью всех $ областей (прототип наследование магии)

//**attach in controller1:** 
function MyCtrl1($rootScope) { 
    $rootScope.recs= { rec1 : "think philosophically" }; 
} 

//**do nothing in controller for view2:** 
function MyCtrl2($scope) { 
    //nothing 
} 

//**Markup for view2: automaticall makes use of data in $routeScope** 
<p>Try doing this: {{recs.rec1 }}</p> 

//**markup for view1 to respond to OPs question in comments**: 
<input ng-model="recs.rec1" /> 

Обновление: Создание таможенной службы является более масштабируемым и структурно звуком способ справиться с этим, но метод $ rootScope является быстрым и грязным способом.

Update2: добавлена ​​разметка view1 для ответа на вопрос OP, отредактированный пример, чтобы использовать правильные советы для использования объекта, а не примитивного.

Answer 3

Используйте сервис и сохраните свою модель. У Gloopy уже есть хороший пример этого: https://stackoverflow.com/a/12009408/215945
Обязательно используйте свойство объекта вместо примитивного типа.

Если вы не хотите использовать $ rootScope, то, как указано выше, определить объект, а не примитивное:

$rootScope.obj = { prop1: "somevalue" }` 

затем привязать к этому свойству объекта в ваших просмотров:

<input type="text" ng-model="obj.prop1"> 
{{obj.prop1}} 

Answer 4

Вы должны использовать $ broadcast, $ emit или scope. Старайтесь не перегружать rootScope.Это плохая практика как сохранение данных в сеансах приложений.