web-dev-qa-db-fra.com

Angularjs - Passer l'argument à la directive

Je me demande s'il existe un moyen de passer un argument à une directive?

Ce que je veux faire, c'est ajouter une directive du contrôleur comme ceci:

$scope.title = "title";
$scope.title2 = "title2";

angular.element(document.getElementById('wrapper')).append('<directive_name></directive_name>');

Est-il possible de passer un argument en même temps pour que le contenu de mon modèle de directive puisse être lié à un domaine ou à un autre?

voici la directive:

app.directive("directive_name", function(){
    return {
        restrict:'E',
        transclude:true,
        template:'<div class="title"><h2>{{title}}</h3></div>',
        replace:true
    };
})

Et si je veux utiliser la même directive mais avec $ scope.title2?

angularjscontrollerargumentsdirective
55
SKYnine

Voici comment j'ai résolu mon problème:

Directive 

app.directive("directive_name", function(){
    return {
        restrict: 'E',
        transclude: true,
        template: function(elem, attr){
           return '<div><h2>{{'+attr.scope+'}}</h2></div>';
        },
        replace: true
    };
})

Manette 

$scope.building = function(data){
    var chart = angular.element(document.createElement('directive_name'));
    chart.attr('scope', data);
    $compile(chart)($scope);
    angular.element(document.getElementById('wrapper')).append(chart);
  }

Je peux maintenant utiliser différentes portées à travers la même directive et les ajouter dynamiquement.

7
SKYnine

Vous pouvez passer des arguments à votre directive personnalisée comme vous le faites avec les directives angulaires intégrées - en spécifiant un attribut sur l'élément de directive:

angular.element(document.getElementById('wrapper'))
       .append('<directive-name title="title2"></directive-name>');

Ce que vous devez faire, c'est définir la scope (y compris le ou les arguments/paramètres) dans la fonction de fabrique de votre directive. Dans l'exemple ci-dessous, la directive prend un paramètre title-. Vous pouvez ensuite l'utiliser, par exemple dans template, en utilisant la méthode angulaire habituelle: {{title}}

app.directive('directiveName', function(){
   return {
      restrict:'E',
      scope: {
         title: '@'
      },
      template:'<div class="title"><h2>{{title}}</h2></div>'
   };
});

Selon comment/ce que vous voulez lier, vous avez différentes options:

  • = est une liaison bidirectionnelle
  • @ lit simplement la valeur (liaison à sens unique)
  • & est utilisé pour lier des fonctions

Dans certains cas, vous pouvez utiliser un nom "externe" différent du nom "interne". Avec external, j'entends le nom d'attribut sur l'élément directive et avec internal, le nom de la variable utilisée dans le champ d'application de la directive. 

Par exemple, si nous regardons la directive ci-dessus, vous ne voudrez peut-être pas spécifier un autre attribut supplémentaire pour le titre, même si vous souhaitez en interne utiliser une propriété title-. Au lieu de cela, vous souhaitez utiliser votre directive comme suit:

<directive-name="title2"></directive-name>

Cela peut être réalisé en spécifiant un nom derrière l'option mentionnée ci-dessus dans la définition de la portée:

scope: {
    title: '@directiveName'
}

S'il vous plaît noter également les choses suivantes:

  • La spécification HTML5 indique que les attributs personnalisés (c'est ce qui se passe partout dans les applications angulaires) devraient être précédés du préfixe data-. Angular le permet en supprimant le préfixe data-- de tous les attributs. Ainsi, dans l'exemple ci-dessus, vous pouvez spécifier l'attribut sur l'élément (data-title="title2") et, en interne, tout serait identique.
  • Les attributs sur les éléments sont toujours sous la forme de <div data-my-attribute="..." /> tandis que dans le code (par exemple, les propriétés sur l'objet de la portée), ils sont sous la forme de myAttribute. J'ai perdu beaucoup de temps avant de m'en rendre compte.
  • Pour une autre approche d’échange/partage de données entre différents composants angulaires (contrôleurs, directives), vous pouvez consulter les contrôleurs de services ou de directives.
  • Vous trouverez plus d’informations sur la page d’accueil Angular (directives)
130
PzYon

Vous pouvez essayer comme ci-dessous:

app.directive("directive_name", function(){
return {
    restrict:'E',
    transclude:true,
    template:'<div class="title"><h2>{{title}}</h3></div>',
    scope:{
      accept:"="
    },
    replace:true
  };
})

il établit une liaison bidirectionnelle entre la valeur de l'attribut 'accept' et la portée parente.

Et vous pouvez également définir une liaison de données bidirectionnelle avec la propriété: '='

Par exemple, si vous souhaitez que la clé et la valeur soient liées à la portée locale, procédez comme suit:

  scope:{
    key:'=',
    value:'='
  },

Pour plus d'informations, https://docs.angularjs.org/guide/directive

Donc, si vous voulez passer un argument du contrôleur à la directive, référez-vous à cela ci-dessous

http://jsfiddle.net/jaimem/y85Ft/7/

J'espère que ça aide..

6
SDK
<button my-directive="Push">Push to Go</button>

app.directive("myDirective", function() {
    return {
        restrict : "A",
         link: function(scope, Elm, attrs) {
                Elm.bind('click', function(event) {

                    alert("You pressed button: " + event.target.getAttribute('my-directive'));
                });
        }
    };
});

voici ce que j'ai fait

J'utilise directive comme attribut html et j'ai passé le paramètre suivant dans mon fichier HTML. my-directive="Push" Et de la directive je l'ai récupéré de l'objet événement clic-souris. event.target.getAttribute('my-directive').

0
Sajith Dushmantha Samarathunga