2016-06-18 1 views
0

コンテンツを編集、キャンセル、保存できる簡単な編集可能なdivページを作成しようとしています。編集をクリックすると、正しく編集するためにdivが有効になっているようです。しかし、私が保存すると、値は入力されたものと同期されません。さらに、キャンセルして前にあったものに戻す必要がある場合、正しい値を引き出すことはありません。角度で値をコピーすると正常に動作しない

参照をコピーしないように、現在の値と空の文字列を連結して以前の内容を一時的に保存しようとしましたが、どこがうまくいけないのか分かりません。

私は証明するために簡単な例を作成しました: http://play.ionic.io/app/76fa89478b4c

+0

:そのようになって、あなたのhtml

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

はでのcontentEditableであなたのdivを交換してください。ソリューションのために* "角度contenteditable" *を検索してください。また、これを必要以上に複雑にする。オブジェクトと 'angular.extend()'と 'angular.copy()'を使用して簡素化 – charlietfl

答えて

1

コンテンツの編集可能なは、角を完全に機能していないためです。角度が `自身でcontenteditable`をサポートしていません

<!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

あなたが逃げたので、究極の問題は、角度処理された双方向バインディングcontenteditable要素で結ばれました。私のアプリケーションが書かれた方法のために、入力ボックスを使用することは望ましくありませんでした。次の記事の助けを借りて、私はangleのサポートの欠如を補うカスタムディレクティブを書いた:http://mehrantm.blogspot.com/2013/10/how-make-two-way-binding-to-your.htmlそれは私にとって素晴らしい仕事でした。 –

関連する問題