Angular JS:Diretiva para comunicação do controlador com scope.apply não funciona

Question

Eu tenho um MainController e uma diretiva aninhada.estou olhando este exemplo para ver como funciona a comunicação entre controladores e diretiva, mas o meu parece não funcionar.

Basicamente, quero chamar uma função de escopo do controlador principal a partir de uma diretiva personalizada (botão carrinho vazio).Veja o exemplo do plunkr abaixo.

Plukr: http://plnkr.co/edit/82STLkKxBK6htTnmnqlu?p=preview

Sempre que faço console.log(scope.$apply("emptyCart()")), ele fica indefinido por algum motivo.

Observação:Estou tentando evitar $rootScope.broadcast tanto quanto possível...

Answer 1

Você está usando escopo isolado para a diretiva pai, portanto a diretiva filho não tem acesso ao escopo do controlador.

Para fornecer à diretiva filho acesso a essa função de escopo enquanto mantém o isolamento do pai, você pode adicionar essa função como um scope: { ... } propriedade na diretiva pai:

scope: {
  ...
  emptyCart: '='
}

e defina o nome da função para o atributo correspondente na declaração de visualização da diretiva pai:

<div ... data-show="showPopup" empty-cart="emptyCart"></div>

Então você pode pular todas as soluções alternativas que tentou empregar em seu Plunker e apenas definir um ng-click na diretiva filho para disparar a função do controlador:

sHTML = "<button ... ng-click='emptyCart()'>Empty cart</button>";

Demonstração