用Django呈現的模板隱藏與AngularJS的div

我有一個由Django模板標記呈現的HTML表單，我想用AngularJS來操縱它。用Django呈現的模板隱藏與AngularJS的div

在我的模板（不渲染），我有：

<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，但我不能夠在我的HTML中添加ng-show或ng-hide指令，因爲Django生成HTML代碼的方式。

是否有可能在AngularJS控制器內顯示/隱藏這個div？

謝謝！

來源

2013-01-31 Renne Rocha

Django是在Angular編譯後生成的HTML嗎？ –

在Angular編譯之前生成HTML。 –

所以你可以讓Django在某處添加「ng-controller ='...'」，但是你不能在其他地方添加「ng-show ='...'」。你能讓Django向目標div添加一個類（這將是一個指令）嗎？ –

是否有可能在AngularJS控制器內顯示/隱藏這個div？

是的，但這個「深入角落的方式」 - Misko。注入$元素，然後使用選擇器來查找和操作。 $ 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。

來源

2013-01-31 17:09:37

oooooh這是頑皮... – joshkurz

如果您不能修改模板，那麼既不要添加類到該特定的DIV，也不要添加ng-show，而應該創建指令來處理此DOM操作。您不應該在控制器內進行DOM操作。作爲stated by the DOCs，

不要使用控制器：

任何一種DOM操作 - 控制器應該只包含業務邏輯。 DOM操作 - 應用程序的表示邏輯 - 因難以測試而衆所周知。將任何表示邏輯放入控制器中會顯着影響業務邏輯的可測試性。 Angular爲自動DOM 操作提供數據綁定。如果您必須執行自己的手動DOM操作，則將[演示文稿] http://docs.angularjs.org/guide/directive中的演示邏輯封裝起來。

...

我建議你$watch你需要的屬性和手動顯示/隱藏從指令的link函數內的元素。

來源

2013-01-31 16:46:35

同意。這不是AngularJS必須使用的方式。但我找到了一種方法來改變我的模板。這是缺乏Django的知識:-) 我會在這裏發佈解決方案。 –

我錯了。可以更改Django呈現表單的模板。

當定義一個django表單時，我可以更改每個fiels的小部件，所以我可以將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-31 18:08:41

好，我很高興你讓Django來做它。你可能希望將ng-show綁定到$ scope屬性。 –

但是當我們使用Django中的表單實例更新數據時，angularJs刪除了初始值 –

用Django呈現的模板隱藏與AngularJS的div

回答

相關問題