從元素的角度獲取控制器

Question

有沒有通過Chrome的控制檯找到元素的控制器的方法？我可以通過元素面板中選擇元素，並使用

var c = angular.element($0); 

c有controller屬性（看起來像一個構造函數）獲取到組件的引用，但我不知道該怎麼做這個。有沒有辦法從這裏找到控制器的名字？

Answer 1

如果你angular.element($0).scope()或只是$scope（如果安裝Batarang Chrome擴展），你應該能夠獲得訪問所選元素的範圍的功能和性能。這應該還包括控制器在範圍中公開的任何功能/屬性。

雖然沒有辦法獲得控制器的名稱。

Answer 2

假如你不使用匿名函數的控制器，你可以使用這樣的事情：

angular.element(element).controller().constructor.name 

codepen - http://codepen.io/jusopi/pen/jWYWzv?editors=101

至少爲角1.2.27的，按他們的文檔，你可以做這個。看看下JQLite額外方法部分 - https://docs.angularjs.org/api/ng/function/angular.element

Answer 3

正如@jusopi已經指出的那樣，你可以使用jqLit​​e額外的方法angular.element(element).controller(componentName)：

[它]檢索當前元素或其母公司的控制器。默認情況下，檢索與ngController指令相關的控制器。如果名作爲駝峯指令名提供，那麼對於這個指令，控制器將被檢索

如果在駝峯提供一個指令/組件名稱還可以得到所有指令的特定控制器/在選定的元素組成：

angular.element($0).controller('MyComponent')

（$ 0是指在要素檢查的最新選擇）

Answer 4

這適用於Angular 1。5的部件

假設你有一個名爲ProductViewComponent組分，它是由ProductViewController處理，然後讓控制器很簡單：

angular.element("product-view").controller("productView") 

備註：

• 注意小寫字母和衝擊元素名稱
• 和小寫字母並且沒有「Controller」後綴X在控制器文本

例子

現在你可以用它玩，比如調用方法：

angular.element("product-view").controller("productView").hasProducts(); 

或調用行動！

angular.element("product-view").controller("productView").products = [ 'abc' ] 
angular.element("product-view").scope().$apply()