Распространять изменения с родительской области в AngularJS

Question

Я передаю объект, используя атрибут из родительской области для дочерней области, и я хотел бы, чтобы изменения, внесенные в область дочерних объектов, распространялись в родительскую область.

В основном это родительский вид:

<foo oo-bar="object"></foo> 

И это foo директива:

Проблема в том, что изменения, внесенные в родительской области распространяются на ребенка рамки, но не наоборот.

Например, если я попытаюсь установить $scope.bar = 4 в области с дочерним объектом, то родительский bar не изменится.

Я понял, что Angular создает новый bar в области дочерних объектов, который не связан с bar в области родителя.

Если это так, как я могу распространять изменения обратно в родительскую область?

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

Edit: Plunker

Answer 1

решение, которое я искал я нашел здесь: Understanding Scopes

Ключевая часть заключается в следующем:

Этот проблема с примитивами может быть легко устранена foll благодаря «лучшей практике» always have a '.' in your ng-models - стоит 3 минуты. Misko демонстрирует примитивную проблему с привязкой ng-switch.

Наличие '.' в ваших моделях будет гарантировать, что прототипное наследование находится в игре. Таким образом, используйте <input type="text" ng-model="someObj.prop1">, а не <input type="text" ng-model="prop1">.

Если вы действительно хотите/должны использовать примитивный, есть два пути:

1. Использование $parent.parentScopeProperty в детской области. Это предотвратит создание дочернего объекта собственного свойства.
2. Определим функцию на родительской области, и называют его от ребенка, передавая элементарное значение до родителя (не всегда возможно)

Answer 2

В родительской области вы должны иметь объект не primitve значение, в этом случае изменяющегося объекта недвижимости в детском объеме будет обновляться также в родителю. позвольте мне привести скрипку

$scope.object = {}; 
$scope.bar = '' // wrong way its a primiive 

Demo without object

Demo with object

Answer 3

<parent ng-controller="parentCtrl"> 
    Parent bar: {{ bar }} 
    <child foo="bar"> 
    Child bar: {{ foo }} 
    <input type="text" ng-model="foo"> 
    </child> 
</parent> 

Все элементы внутри parent узел будет скомпилирован с объемом parentCtrl.

{{ bar }} - {{ foo }} будет оцениваться в объеме parentCtrl.

Первоначально не существует foo, определенного в parentCtrl, поэтому оно не печатало никаких значений.

При вводе в поле ввода, ng-model создаст в объеме, с которым он (ng-model) компилируется (т.е., parentCtrl) переменную foo и обновить его.

Теперь у нас есть foo в области parentCtrl.

Поскольку {{ foo }} скомпилирован с охватом parentCtrl, он отображает значение, введенное в текстовое поле.

Двусторонний связывание

scope : { 
    foo: '=' 
} 

это создаст два способа связывания между parentCtrl объемом bar и объемом childCtrl foo переменных.

Если вы измените значение foo в функции ссылки дочерней директивы. Он обновит значение столбца в области parentCtrl.