AngularJS secureHTML verify image click event

Question

AngularJS secureHTML verify image click event

Just starting out with AngularJS and hoping for some assistance :)

I have a div that has the details of an activity, formatted in HTML. To display this content correctly, I am using trustAsHTML:

<div class="description-div">
  <div ng-bind-html="renderHtml(booking.description)">
  </div>
</div>

There is a $rootScope function involved:

$rootScope.renderHtml = function (htmlCode) {
return $sce.trustAsHtml(htmlCode);
};

The description may include images, so I would like to trigger a popup when an image is clicked.

Any suggestions on how to achieve this? I believe a directive might be needed, but my attempts so far have been unsuccessful.

Appreciate any guidance you can provide!

javascript angularjs ionic-framework

Answer 1

Answer №1

Avoid polluting $rootScope with unnecessary helper functions to prevent it from becoming overly complex.

One effective method to achieve your goal is by using a directive:

app.directive("myBooking",["$sce", function($sce) {
  return {
    restrict: 'E',
    scope: {
      booking: "="
    },
    template: "<div ng-click='click($event)' ng-bind-html='trustedHtml'></div>",
    link: function(scope, elem, attrs) {
      scope.trustedHtml = $sce.trustAsHtml(scope.booking.description);
      scope.click = function($event) {
        if($event.srcElement.tagName.toLowerCase() === 'img') {
           // Perform specific action for the desired image...
        }
      }
    }
  };
}]);

If the booking object belongs to a controller's property in its scope, utilize the directive as follows:

<my-booking booking="booking"></my-booking>

The directive mentioned assumes that the img click event will bubble up, meaning that the trusted HTML does not intercept img click events. Here is a link to a plunkr example showcasing this directive in action.

Answer 2

Avoid polluting $rootScope with unnecessary helper functions to prevent it from becoming overly complex.

One effective method to achieve your goal is by using a directive:

app.directive("myBooking",["$sce", function($sce) {
  return {
    restrict: 'E',
    scope: {
      booking: "="
    },
    template: "<div ng-click='click($event)' ng-bind-html='trustedHtml'></div>",
    link: function(scope, elem, attrs) {
      scope.trustedHtml = $sce.trustAsHtml(scope.booking.description);
      scope.click = function($event) {
        if($event.srcElement.tagName.toLowerCase() === 'img') {
           // Perform specific action for the desired image...
        }
      }
    }
  };
}]);

If the booking object belongs to a controller's property in its scope, utilize the directive as follows:

<my-booking booking="booking"></my-booking>

The directive mentioned assumes that the img click event will bubble up, meaning that the trusted HTML does not intercept img click events. Here is a link to a plunkr example showcasing this directive in action.

AngularJS secureHTML verify image click event

Answer №1

Similar questions

Updating the CSS: Using jQuery to modify the display property to none

I am having an issue with my registration form in node.js where it does not redirect after submitting

JSfiddle not loading properly on website

How can we make the lines in the Highcharts force plot take up all the available width

The size of my React Native app is significantly larger than expected once installed

Ensuring the consistency of form fields using AngularJS

Having trouble loading HTML content from another file

Utilizing Vue JS to showcase a pop-up block when hovering over a specific image

When utilizing KineticJS on a canvas that has been rotated with css3, the functionality of the events appears to be malfunctioning

Unexplained disappearance of div element in Vue Router's Navbar

The jQuery UI Dialog is experiencing an issue with a button that is triggering a HierarchyRequest

An error occurred while trying to import a module due to an unexpected token

Modify the behavior of the Android back button when a Popup is displayed in Ionic

Using a loop variable within a callback function in JavaScript/TypeScript: Tips and tricks

Restore checkbox to default setting

Getting rid of the scrollbar in Internet Explorer

grid causing images to display incorrectly in incorrect positions

I'm curious as to why styled components weren't working before

Trouble accessing onclick function

Is it possible to scroll by using the dragenter event?