Javascript Angularjs ng单击内部指令。控制器连接问题

单击指令时，

ShowPopover

不起作用。你能帮我找出问题的原因吗

指令：

 angular.module('landingBuilder').directive('popoverDirective', popoverDirective);

        function popoverDirective() {
            return {
                restrict: 'E',
                templateUrl: '/libs/landing-builder/directive/popover-directive/popover-directive.html',
                controller: controller,
                controllerAs: 'vm',
                transclude: true,
                bindToController: true
            };

            function controller($element, $document){
                var vm = this;
                vm.showPopover = showPopover();
                function showPopover() {
                    console.log('show popover');
                };
            }
        }

模板：

<div class="input-layover popup-target" ng-click="vm.showPopover"</div>

在此处使用
showPopover（）
而不是
showPopover

myApp.directive('myDirective', function() {
  return {
    restrict: 'E',
    template: '<button ng-click=vm.showPopover()>hello</button>',
    controller: controller,
    controllerAs: 'vm',
    transclude: true,
    bindToController: true
  };

  function controller($element, $document) {
    var vm = this;
    vm.showPopover = showPopover;

    function showPopover() {
      console.log('show popover');
    };
  }
});

myApp.directive（'myDirective'，function（）{
返回{
限制：'E'，
模板：“你好”，
控制器：控制器，
controllerAs:'vm'，
是的，
bindToController:true
};
功能控制器（$element，$document）{
var vm=这个；
vm.showPopover=showPopover；
函数showPopover（）{
log（'show popover'）；
};
}
});

看看这把小提琴：

您在代码中犯了一些错误：

它不是正确的html
您需要在单击时调用函数，而不是在控制器内部
您的模板应如下所示：

 <div class="input-layover popup-target" ng-click="vm.showPopover()"></div>

  function controller($element, $document) {
    var vm = this;
    vm.showPopover = showPopover;

    function showPopover() {
      console.log('show popover');
    };
  }

对谢谢将其添加到answer@IgorPonomarenko如果有帮助的话。您应该将其标记为正确。：）