ng-click 如何调用 ng-directive 函数

Question

在我的指令中有一个 html 按钮。我想在单击时调用一个函数。我对 angular js 了解不多。所以我想在单击按钮时打开一个模式。

我认为路径是，

html 按钮 -> 指令内的 showModal() 函数。这个 showModal() 是一个网络服务函数，它使用网络服务调用模态。

我在html中添加了ng-click="documentManagerButtonCtrl.showDocumentModal()"。

但它没有调用指令函数。谁能解释一下单击按钮时如何打开带有服务的模式

<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'
        );
    }
}

})();

Answer 1

改变

controllerAs: 'DocumentManagerButtonCtrl'

到

controllerAs: 'vm'

因为你有

var vm = this;

之后你需要使用

公开 showDocumentModal() 函数

vm.showDocumentModal = showDocumentModal;

然后你可以用ng-click调用：

ng-click="vm.showDocumentModal()"

ng-click 如何调用 ng-directive 函数

How ng-click call for ng-directive function

angularjs

angularjs-directive

angular-material

angular-ui-router