Angulaire Obtenir Contrôleur à partir de l'Élément

Est-il un moyen de trouver le contrôleur pour un élément par le biais de google Chrome console? Je peux obtenir une référence sur le composant en sélectionnant l'élément dans la Éléments du Panneau et à l'aide de

var c = angular.element($0);

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

  • êtes-vous juste essayer d'obtenir le nom du contrôleur, ou essayez-vous d'utiliser les fonctions du contrôleur et les éléments sur la portée.
  • juste le nom du contrôleur.
InformationsquelleAutor reergymerej | 2014-02-24
  1. 20

    Si vous ne angular.element($0).scope() ou tout simplement $scope(si vous avez installé Batarang extension Chrome), vous devez être en mesure d'obtenir l'accès à l'élément sélectionné du champ d'application de fonctions et de propriétés. Cela devrait également inclure toutes les fonctions/attributs qu'un contrôleur a exposé sur le champ.

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

    • Est-il possible d'obtenir le nom du contrôleur de son champ d'application?
    • Pas moins que le champ d'application "exige" un contrôleur. Quelle est votre cas d'utilisation pour l'accès à un contrôleur de la console?
    • Je suis juste curieux de savoir si c'est possible.
    • L' ".portée()" sur l'élément peut être désactivé si compileProvider.debugInfoEnabled(false); selon docs.angularjs.org/guide/production
    InformationsquelleAutor Vladimir Gurovich
  2. 14

    En supposant que vous n'êtes pas à l'aide d'une fonction anonyme 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 aussi Angulaire 1.2.27, par leur documentation, vous pouvez le faire. Regardez sous le JQLite Extras Méthode de la section https://docs.angularjs.org/api/ng/function/angular.element

    InformationsquelleAutor jusopi
  3. 4

    Comme @jusopi l'a déjà souligné, vous pouvez utiliser le jqLite méthodes supplémentaires angular.element(element).controller(componentName):

    [Il] récupère le contrôleur de l'élément courant ou de son parent. Par défaut récupère contrôleur associé à l'ngController directive. Si le nom est fourni en camelCase nom de la directive, puis le contrôleur de cette directive seront récupérées

    Si vous fournissez une directive/nom du composant en camelCase vous pouvez également obtenir des contrôleurs spécifiques de toutes les directives/composants dans l'élément sélectionné:

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

    ($0 fait référence à la sélection la plus récente dans les éléments de l'inspecteur)

    • J'aimerais qu'ils soulignent que de plus en plus dans les docs. Je viens d'apprendre sur ce à partir de votre réponse. Merci.
    InformationsquelleAutor bjunix
  4. 4

    Cela fonctionne Angulaire de 1,5 composants

    En supposant que vous avez un composant nommé ProductViewComponent qui est géré par l' ProductViewController, puis le contrôleur est facile:

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

    Remarques:

    • Note de bas de casse des lettres et des tirets dans le nom de l'élément
    • et en bas de casse et pas de "Contrôleur" suffixe contrôleur de texte

    Exemples

    Maintenant, vous pouvez jouer avec elle, 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()
    • Cela fonctionne quel que soit le nom du contrôleur. Le texte de l'appel à element.controller() juste besoin d'être le camelCase nom du composant. Où avez-vous trouver cette magie morceau de l'information? J'ai cherché toute la matinée, jusqu'à ce que je suis tombé sur ce petit bijou.
    • ce code est une partie de la composante des tests angulaire (jasmin de tests pour un composant). Je viens d'être errant que, même si le travail "réel" du navigateur.
    • Il fonctionne parfaitement en chrome devtools.
    InformationsquelleAutor andrew.fox
  5. 0

    Si vous êtes simplement à la recherche de trouver ce que le contrôleur (et ne pas l'utiliser dans votre code, peut-être juste la console):

    exécuter angular.element(element).controller().constructor

    dans la console, et si la fonction est nommée, vous devez être en mesure de voir le nom. (comme mentionné par @jusopi)

    même si elle n'est pas, cependant, si vous êtes dans le chrome devtools (probablement d'autres outils), vous pouvez clic droit sur le revenu sans nom de la fonction et de

    sélectionnez "Afficher la Définition de Fonction" dans le menu clic-droit

    qui vous mènera à l'endroit dans le code source où il est défini, ainsi que du contexte de là, vous pouvez comprendre ce que contrôleur de il est, quelles sont les fonctions définies à l'intérieur, etc.

    • C'est une bonne idée.
    InformationsquelleAutor jenming