3

Como posso chamar uma diretiva, dentro de uma segunda diretiva?

Eu tenho uma variável x na diretiva 1 e quero acessar essa variável x numa diretiva 2 para que eu possa dizer que x (diretiva 1) === y (diretiva 2).

3 Respostas 3

3

A maneira recomendada é implementando um serviço que você deve injetar nas diretivas/controles onde deseja compartilhar sua variável. (A idéia é que você possa compartilhar o valor e controlar o acesso de maneira unificada)

Um bom exemplo pode ser encontrado neste post do Stack Overflow original.

2
  • gostei do exemplo. Muito obrigado pela explicação. Vou dar uma testada em variações desse post do Stack Overflow para ver como posso usar na minha aplicação.
    – Edmo
    Commented 25/11/2014 às 14:29
  • @Edmo não por isso, é um prazer ajudar.
    – OnoSendai
    Commented 25/11/2014 às 14:49
3

Não é uma boa prática, mas você pode passar a diretiva 1 como required na 1

app.directive('directive1', function(){
    return { ... }
});

app.directive('directive2', function) {
    return {
        require: 'directive1',
        link: function(scope, elem, attrs, directive1Ctrl /* *** AQUI VAI O CONTROLLER DA DIRETIVA1 ** */) {
            // ACESSE A DIRECTIVE 1 PELO QUARTO PARAMETRO PASSADO.
        }
});
0

Para você passar valores de diretivasFilhas você passa a propriedade para a diretiva que deseja e ela recebe esse valor, exemplo estou passando a propriedade valor da DiretivaA para a DiretivaB, pois irei reaproveitar o que o usuário inseriu neste campo em outro section do meu form. Fazendo isso eu posso fazer qualquer regra sem que seja necessário criar um service propriamente para isto.

Outra observação eu estou usando AngularJs 1.3 e estou usando controllerAs para garantir o escopo, e ao invés de usar $scope eu faço a abordagem do John Papa. (var $ctrl = this;)

/* -- diretivaA -- */

define(['initializer', 'myControllerA'], function (myApp) {
  function myControllerI(ENV) {
    return {
      restrict: 'E',
      templateUrl: ENV.FRONT_END.BASE_URL + '/' + mytemplateA.html,
      controller: 'myControllerA',
      controllerAs: '$ctrl',
      bindToController: true,
      scope: {
        name: '=?',
        zipcode: '=?',
        total: '='
      }
    };
  }

  myApp.directive('directiveA', ['ENV', directiveA]);
});

/* -- diretivaB -- */

define(['initializer', 'myControllerB'], function (myApp) {
  function myControllerB(ENV) {
    return {
      restrict: 'E',
      templateUrl: ENV.FRONT_END.BASE_URL + '/' + mytemplateB.html,
      controller: 'myControllerB',
      controllerAs: '$ctrl',
      bindToController: true,
      scope: {
        car: '=?',
        model: '=?',
        age: '=',
        total: '='  // atributo da minha diretivaA.
      }
    };
  }

  myApp.directive('directiveB', ['ENV', directiveB]);
});

/* -- Template Pai -- */

<div>
    <directive-a 
       name="$ctrl.name"
       zipcode="$ctrl.zipcode"
       total="$ctrl.total">  
     </directive-a>

     <directive-b 
       car="$ctrl.car"
       model="$ctrl.model"
       age="$ctrl.age"
       total="$ctrl.total" (recebendo propriedade da diretivaA)>  
     </directive-b>
</div>

References:

  1. https://blog.thoughtram.io/angularjs/2015/01/02/exploring-angular-1.3-bindToController.html
  2. https://johnpapa.net/angularjss-controller-as-and-the-vm-variable/
  3. https://github.com/angular/angular.js/wiki/Understanding-Scopes
  4. https://github.com/johnpapa/angular-styleguide/issues/63

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .