angular.js - angularjs 的操作dom一般如何寫在指令或服務中？

Question

用angular一直將資料的操作在controller中執行，程式碼看起來比較臃腫並且難以維護，是否有最佳實踐的案例～感謝～

Answer 1

某種意義上或是“約定”，DOM操作只能出現在指令中。最不該出現的位置就是服務中。 Angular倡導以測試驅動開發，在你的service或controller中出現了DOM操作，那麼也意味著你的測試是無法通過的。當然，這只是一點，重要的是使用Angular的其中一個好處是啥，那就是雙向資料綁定，這樣你就能專注於處理業務邏輯，無需關係一堆堆的DOM操作。如果你在Angular的程式碼還到處充斥著各種DOM操作，那為什麼不直接用jquery去開發呢。

我自己也寫過一個範例，或許對你有幫助：https://github.com/dolymood/angular-example

Answer 2

單純的操作dom，還是放在directive裡比較好，涉及數據crud對應DOM的還是通過模板與控制器綁定之後，​​在controler中直接操作scope比較好，一些響應動畫，可以在directive裡綁定事情，然後再controler中廣播事件控制directive中相應的動畫，這裡有一份比較完整的angular的項目，是我14年入門angular時看的，學到了很多，與你分享下，希望對你有所幫助

https://github.com/atian25/wandoujia-satan

Answer 3

1. 所有跟視圖顯示有關的邏輯放到directive中，只有directive可以操作dom。
2. 所有跟頁面資料有關的邏輯放到和該頁面綁定的controller。
3. 所有通用的資料邏輯放到service中。

Angular其實是把一些本來後端幹的活邏輯提到前端來了。

一個經典的例子：todomvc and 原始碼