web-dev-qa-db-fra.com

Angular Get Controller de Element

Est-il possible de trouver le contrôleur pour un élément via la console de Chrome? Je peux obtenir une référence au composant en sélectionnant l'élément dans le panneau Eléments et en utilisant

var c = angular.element($0);

c a une propriété controller (qui ressemble à un constructeur), mais je ne sais pas quoi faire avec cela. Est-il possible de trouver le nom du contrôleur à partir d'ici?

angularjsangularjs-scope
23
reergymerej

Si vous utilisez angular.element($0).scope() ou simplement $scope (si vous avez installé l'extension Batarang Chrome), vous devriez pouvoir accéder aux fonctions et propriétés de l'étendue de l'élément sélectionné. Cela devrait également inclure toutes les fonctions/attributs qu'un contrôleur a exposés sur l'étendue.

Il n'y a aucun moyen d'obtenir le nom du contrôleur, cependant.

20
Vladimir Gurovich

En supposant que vous n'utilisez pas de fonctions anonymes pour un contrôleur, vous pouvez utiliser quelque chose comme ceci:

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

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

Au moins à partir de Angular 1.2.27, vous pouvez le faire grâce à leur documentation. Consultez la section Méthode JQLite Extras - https://docs.angularjs.org/api/ng/function/angular.element

14
jusopi

Cela fonctionne avec les composants de Angular 1.5

En supposant que vous ayez un composant nommé ProductViewComponent qui est géré par ProductViewController, il est facile d'obtenir le contrôleur

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

Remarques :

  • Notez les lettres minuscules et les tirets dans le nom de l'élément 
  • et minuscule et pas de suffixe "Controller" dans le texte du contrôleur

Exemples

Vous pouvez maintenant jouer avec, par exemple, invoquer des méthodes:

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

Ou invoquer actions !

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

Si vous cherchez simplement à trouver ce qu'est le contrôleur (et ne pas l'utiliser dans votre code, peut-être uniquement la console): 

lancer angular.element(element).controller().constructor

dans la console et si la fonction est nommée, vous devriez pouvoir voir le nom. (comme mentionné par @jusopi)

même si ce n'est pas le cas, cependant, si vous êtes dans les devtools de chrome (probablement d'autres outils aussi), vous pouvezcliquer avec le bouton droit de la souris sursur la fonction sans nom renvoyée 

sélectionnez " Afficher la définition de fonction " dans le menu contextuel

ce qui vous mènera à l'emplacement du code source où il est défini, et à partir du contexte, vous pouvez déterminer de quel contrôleur il s'agit, quelles fonctions sont définies dans celui-ci, etc.

0
jenming