Угловая - двусторонняя привязка через нг-переключатель

Question

У меня есть директива с областью действия и двусторонняя привязка '=' к значению родительской области (да, внутри объекта, чтобы избежать проблем наследования.) Шаблон директивы, в свою очередь, содержит переключатель ng, который, конечно, создает другую область действия, Внутри ng-switch я хочу, чтобы текстовая область была привязана к исходному значению. Он инициализируется правильно, но когда пользователь редактирует значение, значение родительской области не изменяется.

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

myApp.directive('csContenteditable', function () {
    return {
        restrict: 'A',
        scope: {
            content: "=",
            editMode: "=csContenteditable",
        },
        template: 
            "<div ng-switch='editMode'>" +
                "<div ng-switch-when='false'>{{content}}</div>" +
                "<div ng-switch-when='true'><textarea ng-model='content'/><div>" +
            "<div>"

    };
});


function MyCtrl($scope) {
    $scope.editMode = false;
    $scope.values = {value: 'foo'}
}

Как правильно это сделать? Я могу использовать ng-show вместо ng-switch, и он работает, потому что нет дополнительной области, но делает мой DOM намного тяжелее, чем необходимо в моем реальном случае из реальной жизни.

Демо: http://jsfiddle.net/LF5UL/

• Установите флажок "Режим редактирования"
• Обратите внимание, что текстовая область инициализируется с помощью "foo"
• Теперь введите текстовое поле.
• Обратите внимание, что "Текущее значение" во внешней области не обновляется.

Answer 1

Это scope эмиссия... директива ng-if создает новую область видимости, поэтому ваша модель не обновляется...

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

привязывать values вместо values.value которая является примитивной переменной и ваша директива не скрывает / скрывает ваш оригинальный объект...

вот твой HTML

<div content="values" cs-contenteditable="editMode" />

и вот шаблон директивы

"<div ng-switch='editMode'>" +
   "<div ng-switch-when='false'>{{content.value}}</div>" +
   "<div ng-switch-when='true'><textarea ng-model='content.value'/><div>" +
"<div>"

для получения дополнительной информации смотрите понимание $ scope...

и вот обновился JSFIDDLE...

ОБНОВИТЬ

Я рекомендую использовать сложный объект вместо $parent, потому что если вы используете какую-то директиву в вашей директиве, которая создает новую область видимости, такую ​​как ng-if сломайте ваше решение $parent, вот пример JSFIDDLE...

Answer 2

Я буду проклят, я просто решил это. Ответ заключается в использовании $parent.content вместо content в обоих случаях внутри директивы.