How ng-click call for ng-directive function

Question

In my directive I have a html button. I want to call a function when it is clicked. I have not much knowledge about angular js. So I want to open a modal when the button clicked.

I think the path is,

html button -> showModal() function inside the directive. this showModal() is a webservice function which call a modal with webservice.

I have added the ng-click="documentManagerButtonCtrl.showDocumentModal()" in the html.

but it is not calling the directive function. can anyone explain how to open a modal with a service when click the button

<div class="col">
  <a class='btn'
     ng-click="pimDocumentManagerButtonCtrl.showDocumentModal()"
     data-target='demoModal' modal>Create</a>
</div>

(function () {
'use strict';

angular
    .module('app.directives')
    .directive('documentManagerButton', documentManagerButton);


/* @ngInject */
function documentManagerButton() {
    return {
        restrict: 'E',
        templateUrl: 'directives/document_manager.html',
        scope: {
            datagroupName: "@",
            employeeNumber: "=",
            documentTemplateDetails: "=",
            employeeService: "="
        },
        bindToController: true,
        link: function (scope, element, attrs) {
        },
        controller: documentManagerController,
        controllerAs: 'DocumentManagerButtonCtrl'
    };
}

documentManagerController.$inject = ['webservice', '$q', 'modalHelperService'];
function documentManagerController(webservice, $q) {
    var vm = this;
  
    function showDocumentModal(){
        modalHelperService.showModal(
            'app/document/document_modal.html',
            'documentController',
            'modal'
        );
    }
}

})();

Matija Šestak Matija Šestak · Accepted Answer · 2020-12-27T18:04:33

Change

controllerAs: 'DocumentManagerButtonCtrl'

to

controllerAs: 'vm'

because you have

var vm = this;

After that you need expose showDocumentModal() function with

vm.showDocumentModal = showDocumentModal;

And then you can call with ng-click:

ng-click="vm.showDocumentModal()"

How ng-click call for ng-directive function

1 Answers