使用ngModel與CONTENTEDITABLE標籤

我想緊具有contenteditable=true使用ngModel與CONTENTEDITABLE標籤

標籤但是一個模型，看起來像ngModel只有輸入，文本區域工作或選擇：

https://docs.angularjs.org/api/ng/directive/ngModel

因此下面的代碼沒有按「科技工作

<code contenteditable="true"> 
    <span style="color: red;"> 
    Hello 
    </span> 
    <span style="color: blue;" ng-model="name"> 
    </span> 
</code>

和

app.controller('MainCtrl', function($scope) { 
    $scope.name = 'World'; 
});

http://plnkr.co/edit/jLJCtcoZQMfhp80LpGfp?p=preview

什麼是做到這一點的最好方法是什麼？我的目標是格式化（樣式）一些可編輯的輸入/文本區域，但綁定到模型。

來源

2014-10-11 HP.

ngModel只適用於輸入，文本區域和選擇框出來。但它可以擴展和用於其他東西，如contenteditable，文件輸入，自定義單選按鈕沒有實際的輸入 – Endless 2014-10-11 10:33:48

已經有這種在野外的幾個例子，閱讀和學習。有一些關於每一個這樣的pro/con。

提示：Show and Edit Style Element

body style { 
 
\t display: block; 
 
\t background: #333; 
 
\t color: white; 
 
\t font: 13px/1.8 Monaco, Mono-Space; 
 
\t padding: 20px; 
 
\t white-space: pre; 
 
}

<style scoped contenteditable>body { 
 
    background: green; 
 
}</style>

來源

2014-10-11 10:25:02 Endless

跨度不NG-模型中使用此

<!DOCTYPE html> 
<html ng-app="plunker"> 

    <head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <script>document.write('<base href="' + document.location + '" />');</script> 
    <link rel="stylesheet" href="style.css" /> 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.2.25/angular.js" data-semver="1.2.25"></script> 
    <script src="app.js"></script> 
    </head> 

    <body ng-controller="MainCtrl"> 
    <code contenteditable="true" ng-click="setModel()"> 
     <span style="color: red;"> 
     Hello 
     </span> 
     <span style="color: blue;" >{{name}} 
     </span> 
    </code> 
    </body> 

</html>

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

app.controller('MainCtrl', function($scope) { 
    $scope.name=''; 
    $scope.setModel=function(){ 
    $scope.name="World"; 

    } 
});

來源

2014-10-11 09:27:53

不完全是我在找什麼：（1）我不想點擊之前綁定（但其小問題），（2）它沒有雙向綁定（這裏有個大問題） – 2014-10-11 18:13:19

使用ngModel與CONTENTEDITABLE標籤

回答

相關問題