2016-06-18 3 views
0

Я пытаюсь создать простую редактируемую страницу div, на которой вы можете редактировать, отменять и сохранять содержимое. Нажатие на редактирование, похоже, позволяет правильному редактированию div. Однако, когда я сохраняю, значение не синхронизируется с тем, что было введено. Кроме того, когда вы отменяете и должны возвращаться к тому, что было раньше, оно не вытягивает правильное значение.Копировать по значению в Угловая не работает должным образом

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

Я создал простой пример, чтобы продемонстрировать: http://play.ionic.io/app/76fa89478b4c

+0

Угловая не поддерживает 'contenteditable' сам по себе. Поиск * «угловые contenteditable» * для решений. Также сделать все это более сложным, чем необходимо. Используйте объекты и углы.extend() 'и' angular.copy() ', чтобы упростить – charlietfl

ответ

1

Это потому, что содержание редактируемые не работает полностью с угловой.

заменить DIV с contenteditable по:

<input ng-model="contents" ng-disabled="!editingContents"/> 

ваш HTML стал так:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    <link href="https://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet"> 
    <script src="https://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script> 
    </head> 
    <body ng-app="app" ng-controller="TestController"> 
    <ion-pane> 
     <ion-header-bar class="bar-stable"> 
     <h1 class="title">Awesome App</h1> 
     </ion-header-bar> 
     <ion-content class="padding"> 
     <input ng-model="contents" ng-disabled="!editingContents"/> 
     <br/> 
     <button class="button button-dark" ng-click="edit()">edit</button> 
     <button class="button button-dark" ng-click="cancel()">cancel</button> 
     <button class="button button-dark" ng-click="save()">save</button> 
     </ion-content> 
    </ion-pane> 
    </body> 
</html> 
+0

Как вы ускользнули, конечная проблема в конечном итоге заключалась в том, что угловые обрабатываемые двухсторонние связывающие контент-элементы. Из-за того, как было написано мое приложение, было нежелательно использовать поле ввода. С помощью следующей статьи я написал специальную директиву, чтобы компенсировать отсутствие поддержки углов: http://mehrantm.blogspot.com/2013/10/how-make-two-way-binding-to-your.html который отлично работал для меня. –