2

Estou tentando fazer com que a partir de um evento em uma Directive, seja chamado um método pertencente a um Controller, a chamada do método do Controller já está correta, só que parece que o $scope, dentro desse método está errado, pois se seto o $scope.file.data a partir da chamado do evento da Directive ele até seta o valor, mas não atualiza a View, já se seto o $scope.file.data a partir do evento do ng-click na div do Controller, tudo ocorre como o esperado.

O que estou tentando é o seguinte:

var app = angular.module('myApp', []);

app.controller('myController', function($scope) {
  $scope.file = {
    data: "nada!"
  };
  $scope.setExternal = function(data) {
    console.log(data);
    $scope.file.data = data;
  };
});

app.directive('myDirective', function() {
  return {
    restrict: 'A',
    scope: {
      setOnClick: '&'
    },
    link: function(scope, element, attrs) {
      element.on("click", function() {
        scope.setOnClick({
          param: "Clicou na directive!"
        });
      });
    }
  };
});
body {
  margin: 0px;
}
.box {
  padding: 25px 0px;
  border: 2px dashed #bbb;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  text-align: center;
  font: 20pt bold'Vollkorn';
  color: #bbb;
  margin: 10px 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="myController">
    {{file.data}}

    <div class="box" ng-click="setExternal('Clicou na div!')">
      Está é uma Div do controller. Clique aqui!
    </div>
    <div class="box" my-directive set-on-click="setExternal(param)">
      Está é a Directive. Clique aqui!
    </div>
  </div>
</div>

Exemplo também no jsFiddle.

O que posso está deixando de fazer para que a chamada a partir da Directive:

element.on("click", function() {
    scope.setOnClick({
        param : "Clicou na directive!"
    });
});

tenha um $scope válido como o ng-click da div?

Obs: no meu caso real o evento na Directive não é um simples click, e sim um processo um pouco mais complexo. Utilizei um exemplo com click para fins didáticos e práticos.

1 Resposta 1

1

Basta adicionar scope.$apply();:

element.on("click", function() {
    scope.setOnClick({
        param : "Clicou na directive!"
    });
    scope.$apply();
});

Fiddle atualizado

Dica: utilize $scope apenas para passagem de dados entre directives. No Angular 2, $scope será completamente modificado pois muitos desenvolvedores usam $scope para tudo, e acabam criando problemas que não existiriam se utilizassem os controllers corretamente (lembre-se que directive's possuem controllers).

Outra vantagem, é ser muito mais difícil ocorrerem conflitos de nomes e prover melhor re-usabilidade de código.

3
  • Uhm, então o scope, está certo? O que acontece é que ele não está aplicando as alterações no View e o $apply() faz isso. Certo? Interessante mas estranho =(. E a respeito da dica: como não conheço muito bem angular, não entendi se o que estou fazendo está correto, ou está errado, partindo de sua dica? Parece-me está correto, pois estou utilizando $scope apenas para passagem de dados. Commented 30/04/2015 às 19:19
  • 1
    Sim, faltou apenas o $apply. Por alguma razão o Angular não fazendo o dirty check. Utilizando $apply, a gente força isso. Note que o Angular não permite chamadas aninhadas a $apply e que o próprio Angular utiliza $apply para realizar o dirty check. Sobre o uso do $scope, na sua diretriz esta correto, mas no seu controller, o correto seria utilizar this.file = ... e this.setExternal = ..., por exemplo. É necessário alterar as chamadas na sua view, para que funcione, e é necessário dar um apelido ao controller (ng-controller='myController as apelido'). Commented 30/04/2015 às 23:23
  • 1
    Não se preocupe, a doc do Angular não é muito clara com relação a isso. Na versão 2, estão deixando explícito o modo se deve utilizar $scope, inclusive com a possibilidade de deixar de existir e ser manipulada automaticamente pelo Angular (a versão 2 ainda não foi se quer definida completamente sua arquitetura, mas não será nem um pouco compatível com a versão 1). Commented 30/04/2015 às 23:24

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 .