Question

我有一个由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？

谢谢！

Answer 1

我错了。可以更改Django渲染表单的模板。

在定义django表单时，我可以更改每个fiel的小部件，因此我可以将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>

所以在我的控制器中我可以操纵整个场地。

Answer 2

如果您无法修改模板，则既不会将该类添加到该特定DIV以将其添加为ng-show，也不应创建指令来处理此DOM操作。您不应该在控制器中执行DOM操作。作为stated by the DOCs，

请勿将控制器用于：


任何类型的DOM操作 - 控制器应仅包含   商业逻辑。 DOM操作 - 一个表示逻辑   应用程序 - 众所周知难以测试。放任何   控制器中的表示逻辑显着影响可测试性   业务逻辑。 Angular为自动DOM提供数据绑定   操纵。如果你必须执行自己的手动DOM操作，   将表示逻辑封装在[directives] http://docs.angularjs.org/guide/directive）中。

...

我建议你$watch你需要的属性，并在指令的link函数内手动显示/隐藏元素。

Answer 3

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();
    }
  })
}

Fiddle - 在这个小提琴中，我使用了ng-controller。

使用带有Django渲染模板的AngularJS隐藏div

3 个答案: