Access function declared in the directive controller by transclude objects

Question

Access function declared in the directive controller by transclude objects

Navigation

#1 by (1 votes)

2

I'm trying to create a directive that has its scope isolated, but that has some functions that it will be responsible for doing p / directive. Is a div that contains a table and a "Add" button when clicking on the add will open below the table a type form to feed that table. I used transclude for this form and I would like to click on a particular button (included in the transclude) to execute the functions that I determined in the directive to copy the records to table dynamically, so that it does not come to each controller that use this directive I have to do everything in hand this functionality. Here are 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;
    }

})();

Using 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>

angularjs angularjs-directives

asked by anonymous 26.09.2016 / 20:42

1 answer

Chronometer + Calculation in seconds Function to read file via ODBC

score 1 · Accepted Answer

You can create an object to serve as a bridge between controller and directive scopes; The transported content will thus have access to the methods implemented by the policy.

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><divng-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>