Access Function declared in the Directive controller by transcluded objects

Question

I am trying to create a Directive that has its Scope isolated, but that has some functions that she will be responsible for doing p/Directive. It is a div that contains a table and an "Add" button when clicking the add will open below the table a form type to feed that table. I used transclude p/ this form and would like to click on a certain button (included in transclude) come execute the functions I determined in Directive p/ copy the records to table dynamically, so it doesn’t come to every controller that uses this directive I have to do everything in hand this feature. Follow the codes below:

HTML Directive:

<div class="form-horizontal panel panel-default panel-group">
    <div class="panel-heading">
        <div class="form-group">
            <div  ui-grid="options" class="grid" />
        </div>
    </div>
    <div class="panel-footer" style="margin-top: -25px;">
        <div style="text-align: right;">
            <button type="button" class="btn btn-success" data-toggle="collapse" data-target="#divForm{{idGrid}}">Adicionar</button>
        </div>
        <div id="divForm{{idGrid}}" class="collapse">
            <br>
            <ng-transclude></ng-transclude>
        </div>
    </div>
</div>

grid-form.directive.js :

(function() {
    'use strict';

    angular
        .module('controlwebApp')
        .directive('gridForm', gridForm);

    function gridForm () {
        var directive = {
            restrict: 'E',
            transclude: true,
            scope: {
                options: '=',
                idGrid: "@idGrid"
            },
            templateUrl: 'app/components/grid/gridform/grid-form.directive.html',
            bindToController: {
                teste: '&'
            },
            controller: function (){
                this.teste = function(){
                    console.log("Teste Calling!!")
                }
            },
            controllerAs: 'ctrl'
        };

        return directive;
    }

})();

Use of the directive:

 <div class="form-group">
        <grid-form id-grid="grid1" options="vm.gridOptions">
            <div class="form-horizontal">
                <label class="control-label" for="field_qtdEstoqueMax">Qtd Estoque Max1</label>
                <input type="number" class="form-control" name="qtdEstoqueMax" id="field_qtdEstoqueMax" ng-model="vm.produto.qtdEstoqueMax" />
                <label class="control-label" for="field_qtdEstoqueMax">Qtd Estoque Max2</label>
                <input type="number" class="form-control" name="qtdEstoqueMax" id="field_qtdEstoqueMax" ng-model="vm.produto.qtdEstoqueMax"/>
                <button type="button" class="btn btn-primary" ng-click="ctrl.teste()">Save me</button>
            </div>
        </grid-form>
    </div>

Answer 1

You can create an object to bridge between the scopes of the controller and of Directive; The content transported will thus have access to the methods implemented by the Directive.

Functional example below:

angular.module('myApp', [])
.directive('transcludeableDirective', function() {
  return {
    scope: {
      bridgeObject: "="
    },
    templateUrl: 'myTranscludeTemplate',
    transclude: true,
    controller: function($scope) {

      // Diretiva implementa evento event()
      $scope.bridgeObject.event = function(){
        alert('Evento da diretiva chamado!');
      };
    },
  };
})
.controller('myController', function($scope){
  $scope.bridge = {}; // Note que o controller não implementa o método.
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<div ng-app="myApp">
  <div ng-controller='myController'>
    <div transcludeable-directive bridge-object='bridge'>
      TESTE
      <button ng-click='bridge.event()'>CLICK!</button>
    </div>
    <script type="text/ng-template" id="myTranscludeTemplate">
      <h2><div ng-transclude></div></h2>
    </script>  
  </div>
</div>