How can I call a javascript directive link function from a typescript controller l

Question

Someome, please tell me how can I access a javascript directive link function from a typedScript controller. I have a button outside the directive and I want to call that function in my pageController when my user button is clicked. I´ve tried several tutorials but i can´t have it working.

1-This is an extract of th directive.js file I want to call the function from my controller directive.js - javascript (function () {

    'use strict';

    angular.module('pdf', []).directive('ngPdf', ['$window', function ($window) {
        return {
            restrict: 'E',
            templateUrl: function (element, attr) {
                return attr.templateUrl ? attr.templateUrl : 'app/_infrastructure/pdfViewer/viewer.html';
            },
            scope: {
                pdfUrl: '='

            },
            link: function (scope, element, attrs) {
                var url = scope.pdfUrl;
                scope.goPrevious = function () {
                    if (scope.pageToDisplay <= 1) {
                        return;
                    }
                    scope.pageToDisplay = parseInt(scope.pageToDisplay) - 1;
                    scope.pageNum = scope.pageToDisplay;
                };

            }
        };
    }]);
})();

2-This is the directive template (.hmtl)

<nav class="text-center">
    <div class="prev-next-button previous">
        <button class="btn btn-danger btn-sm" ng-click="goPrevious()">
            <i class="fa fa-arrow-left fa-lg"></i>
        </button>
    </div>
    <div class="prev-next-button next">
        <button class="btn btn-danger btn-sm" ng-click="goNext()">
            <i class="fa fa-arrow-right fa-lg"></i>
        </button>
    </div>



    <span>Pág: </span>
    <input type="text" class="searchPageNumber" min="1" ng-model="pageNum">/
    <span>{{pageCount}}</span>



    <button class="btn btn-danger btn-sm" title="Diminuir" ng-click="zoomOut()">
        <i class="fa fa-minus"></i>
    </button>

    <button class="btn btn-danger btn-sm" ng-click="fit()">
        100%
    </button>


    <button class="btn btn-danger btn-sm" title="Aumentar" ng-click="zoomIn()">
        <i class="fa fa-plus"></i>
    </button>

</nav>
<hr style="border-top: 0px; margin-bottom: 0px!important;margin-top: 1px!important" />

<div style="max-height:900px;max-width:1051px;overflow: auto;">
    <canvas id="pdf" style="border:2px solid #000000;"></canvas>
</div>

3- This the user page (.html)

<div class="main-content-inner" ng-controller="MyController as Ctrl">
    <div class="col-xs-8" >
        <div class="form-group" ng-show="(Ctrl.currentProcesso.estadoProcessoId==1 || Ctrl.currentProcesso.estadoProcessoId== 3 ||Ctrl.currentProcesso.estadoProcessoId==6) && Ctrl.appUserBasicInfo.role == 'Escrivão'">
            <ng-pdf data-pdf-url="file.pdf" canvasid="pdf" scale="page-fit" page="1"></ng-pdf>
        </div>
    </div>

    <div class="col-xs-3">
     <button class="btn btn-success btn-sm btn-next"
             ng-click="Ctrl.controllerMethodToCallDirectiveFunction()"
             ng-show="true">
         NEXT
         <i class="tcicons-icon fa fa-arrow-right icon-on-right"></i>
     </button>
    </div>

</div>

4-Finally this is my controller (MyController.ts)

public enumerarProcessoPushPop = (): boolean => {
      //I want to call the directive method here
      return true;
  }

Thanks for asking. This one: scope.goPrevious = function () { if (scope.pageToDisplay <= 1) { return; } — itsumotomodachi, Oct 23 '18 at 13:22
Short answer is you can't easily [and you would have to try it on your own](https://stackoverflow.com/questions/16881478/how-to-call-a-method-defined-in-an-angularjs-directive). Think about what you're trying to do: The directive can be applied to many DOM nodes, you would have to grab an instance of the angular directive that has been applied to a component (scope) and then you could call its goNext method. My hackish suggestion, fire a synthetic event on the buttons that are currently tied to `goNext()` https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events — Ruan Mendes, Oct 23 '18 at 13:33

score 0 · Answer 1 · answered Oct 22 '18 at 15:12

Methods inside Angular directives are not meant to be called. From the Angularjs documentation:

At a high level, directives are markers on a DOM element (such as an attribute, element
name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element (e.g. via event listeners), or even to transform the DOM element and its children.

How can I call a javascript directive link function from a typescript controller l

1 Answers1