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

【问题标题】：How ng-click call for ng-directive functionng-click 如何调用 ng-directive 函数
【发布时间】：2020-12-17 03:14:01
【问题描述】：

在我的指令中，我有一个 html 按钮。我想在单击时调用一个函数。我对 Angular js 知之甚少。所以我想在单击按钮时打开一个模式。

我认为路径是，

html 按钮 -> 指令内的 showModal() 函数。这个 showModal() 是一个 webservice 函数，它用 webservice 调用一个modal。

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

})();

【问题讨论】：

标签： angularjs angularjs-directive angular-material angular-ui-router

【解决方案1】：

改变

controllerAs: 'DocumentManagerButtonCtrl'

到

controllerAs: 'vm'

因为你有

var vm = this;

之后，您需要公开 showDocumentModal() 函数

vm.showDocumentModal = showDocumentModal;

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

ng-click="vm.showDocumentModal()"

【讨论】：