Utilizing ng-click within a tooltip

Question

Utilizing ng-click within a tooltip

I've implemented Angular Bootstrap UI and successfully added a tooltip to my project.

Snippet of HTML:

<div ng-app="helloApp">
  <div ng-controller="helloCtrl as hello"> 
    <a tooltip-trigger="click" tooltip-placement="bottom" uib-tooltip-html="<h1 ng-click='hello.clickInsideToSeeTheWorld()'>Click again!</h1>">Click me to see the tooltip</a>
  </div>
</div>

Javascript snippet:

angular.module('helloApp', ['ui.bootstrap'])

.controller('helloCtrl', helloCtrl)

function helloCtrl() {
  var vm = this;

  vm.clickInsideToSeeTheWorld = function() {alert(123)}
}

However, I am facing an issue where the ng-click event does not trigger when the tooltip is open. Even though there are no errors in the console, it seems that the HTML is not compiled. I need help figuring out how to properly compile the tooltip html so that the ng-click functionality works as expected.

javascript angularjs twitter-bootstrap angular-bootstrap

Answer 1

Answer №1

If you want to extend the previous answer, consider using uib-tooltip-template in place of uib-tooltip-html when taking advantage of the angular template cache.

It is possible that you prefer not to create an external template.html file. In that case, you can simply follow these steps:

var app = angular.module("test", ['ui.bootstrap']);

app.controller("testController", function($scope, $templateCache) {

  $scope.clickInsideToSeeTheWorld = function() {
        alert(123);
  }

  if (!$templateCache.get ('template.html')) {
    $templateCache.put (
      'template.html', 
      '<a ng-click="clickInsideToSeeTheWorld()">Click again!</a>'
    );
  }

});

and

<div ng-app="test" ng-controller="testController">
<p style="margin-top: 5em;" uib-tooltip-template="'template.html'" tooltip-popup-close-delay="3000" >
   Click me to see the tooltip
</p>

Additionally, here's a link to an external plunker for reference: https://plnkr.co/edit/Dsi69MQg4NfgOSI5ClFh?p=preview

Answer 2

If you want to extend the previous answer, consider using uib-tooltip-template in place of uib-tooltip-html when taking advantage of the angular template cache.

It is possible that you prefer not to create an external template.html file. In that case, you can simply follow these steps:

var app = angular.module("test", ['ui.bootstrap']);

app.controller("testController", function($scope, $templateCache) {

  $scope.clickInsideToSeeTheWorld = function() {
        alert(123);
  }

  if (!$templateCache.get ('template.html')) {
    $templateCache.put (
      'template.html', 
      '<a ng-click="clickInsideToSeeTheWorld()">Click again!</a>'
    );
  }

});

and

<div ng-app="test" ng-controller="testController">
<p style="margin-top: 5em;" uib-tooltip-template="'template.html'" tooltip-popup-close-delay="3000" >
   Click me to see the tooltip
</p>

Additionally, here's a link to an external plunker for reference: https://plnkr.co/edit/Dsi69MQg4NfgOSI5ClFh?p=preview

Answer 3

Answer №2

I made a switch from uib-tooltip-html to uib-tooltip-template and also updated the code in $scope for this change.

index.html

<body>

<script>
    var app = angular.module("test", ['ui.bootstrap']);

    app.controller("testController", function($scope) {
      $scope.clickInsideToSeeTheWorld = function() {
            alert(123)}
    });
</script>

<div ng-app="test" ng-controller="testController">

    <p style="margin-top: 5em;" uib-tooltip-template="'template.html'" tooltip-popup-close-delay="3000" >
       Click me to see the tooltip
    </p>
</div>

</body>

template.html

<a ng-click="clickInsideToSeeTheWorld()">Click again!</a>

You can check out the working example on Plunker

Answer 4

I made a switch from uib-tooltip-html to uib-tooltip-template and also updated the code in $scope for this change.

index.html

<body>

<script>
    var app = angular.module("test", ['ui.bootstrap']);

    app.controller("testController", function($scope) {
      $scope.clickInsideToSeeTheWorld = function() {
            alert(123)}
    });
</script>

<div ng-app="test" ng-controller="testController">

    <p style="margin-top: 5em;" uib-tooltip-template="'template.html'" tooltip-popup-close-delay="3000" >
       Click me to see the tooltip
    </p>
</div>

</body>

template.html

<a ng-click="clickInsideToSeeTheWorld()">Click again!</a>

You can check out the working example on Plunker

Answer 5

Answer №3

Another option is to create your own code compilation and then link it to the tooltip HTML

var sc = scope.$new( true ); //creating a new scope for HTML
sc.hello = {} //assigning your hello object to the new scope
var compiledHtml = $compile( '<h1 ng-click="hello.clickInsideToSeeTheWorld()">Click again!</h1>')( sc );

Afterwards, you can assign the tooltip HTML to the compiledHtml.

Answer 6

Another option is to create your own code compilation and then link it to the tooltip HTML

var sc = scope.$new( true ); //creating a new scope for HTML
sc.hello = {} //assigning your hello object to the new scope
var compiledHtml = $compile( '<h1 ng-click="hello.clickInsideToSeeTheWorld()">Click again!</h1>')( sc );

Afterwards, you can assign the tooltip HTML to the compiledHtml.

Utilizing ng-click within a tooltip

Answer №1

Answer №2

Answer №3

Similar questions

Is there a way to retrieve values from a different menu without the need to refresh the page?

Creating a JSON object from two arrays is a simple process

What method can be employed to eliminate choice selection lacking any value?

Modify the background's color and incorporate a pointlight using three.js

The error message javax.ws.rs.NotFoundException: HTTP 404 Not Found pertains to Angular 1.5

Strengthening JavaScript Security

Can one jQuery script be used for multiple ajax 'like' buttons?

"Exploring the possibilities of integrating Typescript into Material-UI themes: A step-by

I want to utilize a select drop-down menu for navigating between pages in my pagination, breaking away from the traditional method of using <a> tags

Establishing global date restrictions for the DatePicker component in Angular 8 using TypeScript across the entire application

Troubleshooting ngFor in Angular 5

I'm having trouble getting $.getJSON to function properly

Alternatives to using $.getJSON()

Button will be disabled unless a value is selected in the dropdown menu

There seems to be a syntax error lurking within npm.js, and for some reason npm insists on utilizing version 10.19.0 of Node.js despite my attempts to update it. The reason behind this behavior

How can we trigger a function once the API requests within a for loop have completed?

Technique for updating URL when submitting a form on a webpage

Execute JavaScript unit tests directly within the Visual Studio environment

Can custom HTML elements be designed to function similarly to standard ones?

Variable in Javascript file causing return value to be 'undefined'