1

Django テンプレート タグによってレンダリングされた HTML フォームがあり、AngularJS を使用して操作したいと考えています。

私のテンプレート（レンダリングされていない）には次のものがあります：

<html>
   <body>
       {{ form.as_p }}
   </body>
</html>

これは、Django がこのテンプレートをレンダリングする方法です。

<html>
   <body>
      <form>
        <div id="div_id_street" class="ctrlHolder ">
        <label for="id_street">
            Street<span>*</span>
        </label>
        <input id="id_street" type="text" class="textInput textinput" name="street" maxlength="32">
        </div>
      </form>
   </body>
</html>

div div_id_streetを非表示にしたいのですが、Django が HTML コードを生成する方法が原因で、HTML に ng-show または ng-hide ディレクティブを追加できません。

AngularJS コントローラ内でこの div を表示/非表示にすることは可能ですか?

ありがとうございました！

4

3 に答える 3

4

私は間違っていた。Django でレンダリングされたフォームのテンプレートを変更することができます。

django フォームを定義するときに、各フィールドのウィジェットを変更できるので、ウィジェットに Angular ディレクティブを配置できます。

例えば：

# forms.py
class MyForm(forms.Form):
    street = forms.CharField(max_length=80, 
        widget=forms.TextInput(attrs={
            'ng-model': 'street',
            'ng-show': 'false',
            'ng-change': 'validateStreet()',})
        )

これは次のようにレンダリングされます。

<div id="div_street" class="ctrlHolder">
    <label for="id_street">Street</label>
    <input ng-model="street" name="street" maxlength="80" ng-change="validateStreet()"
      ng-show="false" type="text" class="textInput textinput ng-valid ng-dirty"
      id="id_street">
</div>

したがって、私のコントローラーでは、このフィールド全体を操作できます。

于 2013-01-31T18:08:41.267 に答える
2

テンプレートを変更できない場合は、その特定の DIV にクラスを追加して を追加しないng-showでください。この DOM 操作を処理するディレクティブを作成する必要があります。コントローラー内から DOM 操作を行うべきではありません。DOC で述べられているように、

次の目的でコントローラーを使用しないでください。

  • あらゆる種類の DOM 操作 — コントローラーにはビジネス ロジックのみを含める必要があります。DOM 操作 (アプリケーションのプレゼンテーション ロジック) は、テストが難しいことでよく知られています。プレゼンテーション ロジックをコントローラーに配置すると、ビジネス ロジックのテスト容易性に大きく影響します。Angular は、自動 DOM 操作のためのデータバインディングを提供します。独自の手動 DOM 操作を実行する必要がある場合は、プレゼンテーション ロジックを [ディレクティブ] http://docs.angularjs.org/guide/directiveにカプセル化します)。
  • ...

必要なプロパティに移動し、ディレクティブ$watchの関数内から要素を手動で表示/非表示にすることをお勧めします。link

于 2013-01-31T16:46:35.290 に答える
2

AngularJS コントローラ内でこの div を表示/非表示にすることは可能ですか?

はい、しかしこれは「Angular のやり方に深く反する」 - Miskoです。$element を注入し、セレクターを使用して検索および操作します。$element は、コントローラーが定義されている要素に設定されます。

function MyCtrl($scope, $element) {
  $scope.show = false;
  $scope.$watch('show', function (value) {
    if (value) {
        $element.find('#div_id_street').show();
    } else {
        $element.find('#div_id_street').hide();
    }
  })
}

フィドル-- このフィドルでは、ng-controller を使用しました。

于 2013-01-31T17:09:37.437 に答える