Troubleshooting problem with connecting AngularJS ng-click within a directive and ControllerAs

Question

Troubleshooting problem with connecting AngularJS ng-click within a directive and ControllerAs

ShowPopover is not triggering when the directive is clicked. Can you please assist me in diagnosing the source of this issue?

Directive:

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

Template:

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

javascript angularjs angularjs-directive

Answer 1

Answer №1

In this situation, it is recommended to use the function showPopover() rather than just 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');
    };
  }
});

View Demo

Answer 2

In this situation, it is recommended to use the function showPopover() rather than just 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');
    };
  }
});

View Demo

Answer 3

Answer №2

Check out this example on the fiddle: https://jsfiddle.net/ns0pe1ur/

There are a few errors in your code that need to be addressed:

Your HTML is not properly formatted.
You should invoke the function on ng-click, not within the controller.

Here is how your template should be structured:

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

And here is how your controller should look like:

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

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

Answer 4

Check out this example on the fiddle: https://jsfiddle.net/ns0pe1ur/

There are a few errors in your code that need to be addressed:

Your HTML is not properly formatted.
You should invoke the function on ng-click, not within the controller.

Here is how your template should be structured:

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

And here is how your controller should look like:

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

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

Troubleshooting problem with connecting AngularJS ng-click within a directive and ControllerAs

Answer №1

Answer №2

Similar questions

Updating the language setting in NextJS without needing to refresh the page

Exploring Fetch API with Promise.all

Obtaining the Final Document Identifier for Paginating with valueChanges()

Effortlessly create a seamless transition in background color opacity once the base image has finished

Application: The initialization event in the electron app is not being triggered

retrieve the complete webpage content, encompassing the .html file, images, .js files, css stylesheets, and more

Building a versatile and interactive table using AngularJS with data sourced from a

Transmitting user data through AJAX via POST method

Safari is struggling with the backface visibility feature not functioning as expected

Executing a for loop with a parameter passed into the setTimeout function

Trigger event upon variable modification

Working with Java to parse non-strict JSON data that does not have keys enclosed in quotes

What's the deal with dynamic prop values in React?

Leveraging TypeScript in Angular 4 for parsing response data

The frequent updating of a material's texture map with images at a rapid pace (approximately every 50 milliseconds) results in significant stuttering

The submission of an Angular form results in errors such as being unavailable or

Iterating through an array step by step in NodeJS with a delay before processing each element

What mistakes am I making in including/injecting functions in AngularJS controllers and factories?

Error Encountered in Angular Unit Testing: Cannot set properties of null while trying to modify 'innerHtml' (Jasmine/Karma)

Shaky parallax movement