如何處理DOM和控制器之間的交互？

我越讀（並嘗試測試）Angular應用程序，我看到控制器引用DOM是不好的做法。（例如this blog post）。如何處理DOM和控制器之間的交互？

我必須缺少一些大的東西，因爲如果控制器無法訪問DOM（例如通過像「document.getElementsByClassName」這樣的「常規」javascript調用），那麼我不明白如何做很多事情我會考慮非常基本。

下面是有一些的，我的應用程序做同樣的問題做作，簡單的例子：

我有一個指令，簡直就是一個紅色的盒子（應用一些樣式的DIV），並使用NG -transclude。所以我會在我的HTML文件中使用它，如<red-box>Text that goes in the red box</red-box>
單擊按鈕時，將所有紅色框的顏色更改爲藍色。我想有這樣的事情在我的HTML文件：<intput type="button" value="Make Them Blue" ng-click="makeThemBlue"/>
在控制器的makeThemBlue功能，我會（例如）找到所有類名的div和類更改爲別的東西，這使得它們藍色

現在考慮一下，我的真實應用程序要複雜得多 - 許多「盒子」由嵌套的指令組成，可以拖動並保存位置。控制器讀取所有保存的設置，並根據用戶如何保存設置將所有設置放在一起。

如何在不讓控制器訪問DOM的情況下執行上述任一示例？

來源

2014-10-28 Jer

您應該爲此使用指令。

見它給你的指令

Angular Directives

文檔內置類似的功能jQuery來訪問大教堂

在指令鏈接功能是驚人的，操作DOM使用相同的語法（幾乎）作爲jQuery。

而且可以維持原有功能的大塊通過使服務，讓您可以單獨每次登錄，再加上你可以訪問大教堂，可以很容易地操縱它們

到指令的控制器功能注射服務會給你維護的代碼重用性。

來源

2014-10-28 15:13:07

這裏是我的主要規則：

Directives - 對於固體成分和DOM操作。
Services - 用於業務邏輯和保存狀態。指令，控制器，服務等應該使用它們。
Controllers - 意見幫手。不應該在內部執行業務邏輯。對於複雜的問題使用服務。

在你的情況下，一個盒子應該是directive。
您的指令將使用可觀察的service並註冊點擊事件。
發生點擊事件時，觀察者將通知所有已註冊的directive實例它已被點擊，並且您應該在directive中應用該實例。

來源

2014-10-28 15:13:33

嗯......好吧。讓我們更簡單的情況下，有一個紅色框，當用戶點擊它，它變成藍色。在這種情況下，我認爲我們不需要這項服務，對吧？那麼在指令本身中會有代碼來獲取DOM元素？或者有什麼方法可以在指令中直接說出'this.setStyle（'background-color'，'blue'）？ – Jer 2014-10-28 15:29:25

在這種情況下，它更簡單。您的templatehtml將如下所示：'

' 'ng-class'將指向您的作用域上的一個字符串，'ng-click'會將其從 redClass更改爲blueClass。 – 2014-10-28 15:39:14

通過讓DOM訪問控制器（或從指令中本地獲取）。這就是陳述範式的全部內容。

如果你的盒子需要改變它的顏色，讓它從控制器的值或指令本身讀取該值，或者類，或者你需要的任何東西。

在一個非常基本的意識：

<my-directive color="getColor()"></my-directive>

來源

2014-10-28 15:26:18

如何處理DOM和控制器之間的交互？

回答

相關問題