0

表示テキストと入力フィールドを作成し、以下のように ng-model でバインドします。

HTML 

  <div ng-app ng-controller="test">
    <div ng-bind="content"></div>
    <input id="txtElem" type="text" ng-model="content">
        <button ng-click="stopBinding()"> Unbind</button>
        <button ng-click="binding()"> Bind </button>
  </div>

JS

function test( $scope ) {
    $scope.content = 'Welcome';

     $scope.binding = function() {
       angular.element(document.getElementById('txtElem')).bind();
    };

    $scope.stopBinding = function() {
       angular.element(document.getElementById('txtElem')).unbind();
    };
};

画面

ここに画像の説明を入力

アンバインド方法はこちら( http://jsfiddle.net/jexgF/ )を見つけましたが、「バインド」ボタンをクリックした場合に再度バインドする方法がわかりません。誰でも助けることができますか？

<div>との要素間のバインドとバインド解除以外に、 2 つのフィールド<input>をバインドおよびバインド解除する方法を知っている人はいますか?<input>

4

1 に答える 1

3

あなたの例の関数がどこにあるかはわかりませんがtest()、コントローラーでDOMを操作することはお勧めできません-実際にはアンチパターンです。

適切な方法は、入力変数とは別にcontent、プレビュー部分を表す変数を作成することです。

これはビューで簡単に行うことができます。あなたの意見では、このロジックが表示のみのロジックである場合。lastBoundの最後の境界値を表しますcontent:

<div ng-init="binding = true">
   <input ng-model="content">
   <button ng-click="binding = false">Unbind</button>
   <button ng-click="binding = true">Bind</button>

   <div ng-bind="lastBound = (binding && content) || lastBound"></div>
</div>

(ng-initここでの使用は説明目的のためだけです -bindingコントローラーで設定する必要があります)。

編集：

意図が別の にバインドすることである場合ng-model、解決策は異なりますが、似ていません。2 つの変数を使用する必要があります。

<input ng-model="content" ng-change="preview = (binding && content) || preview">
<input ng-model="preview" ng-change="content = (binding && preview) || content">
于 2015-03-31T04:56:09.337 に答える