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 操作，请将表示逻辑封装在 [directives] 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 回答