AngularJS - スパンを双方向でバインドする

私はテキストオブジェクトを持っていて、編集可能なスパンにバインドしたいのですが、AngularJSは入力に対する双方向バインディングを提供しますが、スパンではないので、モデルは簡単だろう。ここで AngularJS - スパンを双方向でバインドする

angular.module("myApp", []) 
    .controller("TextController", function ($scope, $http, $location, $interval) { 
     $scope.myText = "my text"; 
     $scope.updateModel = function() { 
      $scope.myText = $("#myspan").html(); 
     }; 
     ... 
    });

は私のスパンである：はここに私のモデルである

<span id="myspan" contenteditable="true" ng-keyup="updateModel()" ng-bind="myText"></span>

私はからkeyupイベントをキャッチし、モデルを更新しています、しかし奇妙なあらゆる種類のものは、（ジャンプしますカーソルで発生します最初に）。これを行うにはエレガントな方法がありますか？私はちょうど入力またはテキストエリアを使用する必要がありますか？私はスパンを使用することは非正統であることを知っていますが、Googleドキュメントでうまくいくようです。

出典

2016-07-20 Julian B.

編集可能なスパンはお勧めしません。 CSSで修正された入力/テキストエリアがあなたの機能をサポートできますか？ –

ここで入力を使用することをお勧めします。CSSを使用して、この時点でどのように見えるようにスタイルを設定することができます。実際のHTML要素は、特に使用したい別の理由がない限りスパン？ –

@aegrey、それは私が考えていたものですが、Googleドキュメントやその他のWebエディタをスパンやdivを使用して調べると、コンテンツのサイズが変更されてしまうため、テキストエリア（およびCSSのみ）。 –

あなたの答えのためのスニペットの下に見つけてください：

ここでは、あなたはjQueryと私は以下のような角度の機能自体を使用することをお勧めします含めています。

ほとんどの場合、AngularJSの双方向データバインディングのためにng-modelを持つinputタグを使用します。

angular.module("myApp", []) 
 
    .controller("TextController", function($scope, $http, $location, $interval) { 
 
    $scope.myText = "my text"; 
 
    $scope.updateModel = function() { 
 
     $scope.myText = 'abc'; 
 
    }; 
 
    $scope.myValue = 'First value' 
 
    });

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

 
    <head> 
 
    <script data-require="[email protected]" data-semver="1.5.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body ng-controller="TextController"> 
 
    <h1>Hello Plunker!</h1> 
 
    <label>Span Value: </label> 
 
    <span id="myspan" contenteditable="true" ng-keyup="updateModel()" ng-bind="myText"></span><br><br><br> 
 
    <input type="text" name="myValue" ng-model="myValue" ><br><br> 
 
    {{myValue}} 
 
    </body> 
 

 
</html>

私はそれはあなたを助け願っています。

乾杯！

出典

2016-07-20 02:33:58 varit05

varit05ありがとうございますが、私はこれがどのようにスパンの双方向バインディングを解決するのか分かりません。入力[テキスト]の双方向バインディングはかなり簡単です。しかし、私がスパンに何かを入力すると、それは "abc"で上書きされ、モデルに拘束されませんでした。 –

はい@ジュリアンB。 'ng-bind'を使った双方向データバインディングは良く見えません。そこで私は双方向データバインディングを提供する 'ng-model'を' input'の例として提供しました。もし私があなただったら。私は、双方向データバインディングのためにinput、select、textareaを使用します。 – varit05

AngularJS - スパンを双方向でバインドする

答えて

関連する問題