web-dev-qa-db-fra.com

Qu'est-ce que "nécessite" de la définition d'objet de directive

require - Exige qu'un autre contrôleur soit passé dans la fonction de liaison de directive actuelle. L'exigence prend un nom du contrôleur de directive à transmettre. Si aucun contrôleur de ce type n'est trouvé, une erreur est générée. Le nom peut être préfixé avec:

  • ? - Ne soulève pas d'erreur. Cela rend la dépendance requise facultative.
  • ^ - Recherchez également le contrôleur sur les éléments parents.

Ci-dessus est la définition des documents officiels. L'ambiguïté est ici ce qu'est exactement un "contrôleur de directive".

Prenez la directive tabs du projet angularjs-ui bootstrap , comme exemple.

angular.module('ui.bootstrap.tabs', [])
.controller('TabsController', ['$scope', '$element', function($scope, $element) {
  ... // omitted for simplicity
}])
.directive('tabs', function() {
  return {
    restrict: 'EA',
    transclude: true,
    scope: {},
    controller: 'TabsController',
    templateUrl: 'template/tabs/tabs.html',
    replace: true
  };
})
.directive('pane', ['$parse', function($parse) {
  return {
    require: '^tabs',
    restrict: 'EA',
    transclude: true,
    scope:{
      heading:'@'
    },
    link: function(scope, element, attrs, tabsCtrl) {
      ... // omitted for simplicity
    },
    templateUrl: 'template/tabs/pane.html',
    replace: true
  };
}]);

La directive pane a require: '^tabs', dans lequel tabs est le nom d'une directive sur son élément parent, tandis que le nom du contrôleur attaché à cette directive est TabsController. D'après ma propre interprétation de la définition ci-dessus, il aurait dû être require: '^TabsController' ne pas require: '^tabs' et c'est évidemment faux. Veuillez me dire ce qui me manque dans ma compréhension.

angularjsangularjs-directive
36
tamakisquare

Ce sujet particulier de la documentation est en effet déroutant, mais aussi étrange que cela puisse paraître, tout a du sens.

La clé pour comprendre la logique derrière cette définition est de comprendre que "contrôleur de directive" se réfère à une directive instance de contrôleur et non à une usine de contrôleur.

En suivant l'exemple des onglets, lorsqu'un élément tabs est créé, une nouvelle instance de TabsController est également créée et attachée à ces données d'élément spécifiques, quelque chose comme:

tabElement.data('$tabsController', tabsControllerInstance)

Le require: '^tabs' sur l'élément pane est essentiellement une demande pour cette instance de contrôleur spécifique (tabsControllerInstance) utilisée sur l'élément parent tabs.

14
bmleite

Le paramètre require, y compris ses préfixes, est documenté sur le $compile Page de référence de l'API .

Exiger une autre directive et injecter son contrôleur comme quatrième argument de la fonction de liaison. Le require prend un nom de chaîne (ou un tableau de chaînes) de la ou des directives à transmettre. Si un tableau est utilisé, l'argument injecté sera un tableau dans l'ordre correspondant. Si aucune directive de ce type ne peut être trouvée ou si la directive n'a pas de contrôleur, une erreur est générée. Le nom peut être préfixé avec:

  • (pas de préfixe) - Localisez le contrôleur requis sur l'élément actuel. Lance une erreur s'il n'est pas trouvé.
  • ? - Essayez de localiser le contrôleur requis ou passez null au link fn s'il n'est pas trouvé.
  • ^ - Localisez le contrôleur requis en recherchant l'élément et ses parents. Lance une erreur s'il n'est pas trouvé.
  • ^^ - Localisez le contrôleur requis en recherchant les parents de l'élément. Lance une erreur s'il n'est pas trouvé.
  • ?^ - Essayez de localiser le contrôleur requis en recherchant l'élément et ses parents ou passez null au link fn s'il n'est pas trouvé.
  • ?^^ - Essayez de localiser le contrôleur requis en recherchant les parents de l'élément, ou passez null au link fn s'il n'est pas trouvé.
95
Blaise