Click event not functioning in programmatically loaded HTML

Question

Click event not functioning in programmatically loaded HTML

I am facing an issue with a JSON file that contains the page content I am trying to load. The link within it appears as follows:

<a data-ng-click='foo()'>Bar</a>

When I load this page content into the HTML page:

<p class="body" ng-bind-html="jsonText | raw"></p>

by applying this filter:

app.filter('raw', function ($sce) {
    return function (input) {
        return $sce.trustAsHtml(input);
    }
});

The problem is that the link does not trigger the foo() function when clicked. I am unsure if what I am attempting is impossible or if there is an error in my approach. Can anyone provide guidance on this issue?

javascript angularjs

Answer 1

Answer №1

To avoid using a filter in this scenario, it is recommended to utilize the $compile function on the loaded HTML, which requires access to the $scope. You can manually compile the HTML and assign the result to the $scope, or alternatively, create a directive instead of a filter:

.directive('dynamicHtml', ['$compile', function ($compile) {
    return {
        link: function ($scope, $element, $attrs) {
            $scope.$watch($attrs.dynamicHtml, function (html) {
                $element.empty().append($compile(html)($scope));
            });
        }
    };
}]);

You can then use this directive in place of ngBindHtml:

<p dynamic-html="jsonText"></p>

It's important to note that when compiling HTML yourself, you are bypassing contextual escaping, so exercise caution and only use it with trusted content.

Answer 2

To avoid using a filter in this scenario, it is recommended to utilize the $compile function on the loaded HTML, which requires access to the $scope. You can manually compile the HTML and assign the result to the $scope, or alternatively, create a directive instead of a filter:

.directive('dynamicHtml', ['$compile', function ($compile) {
    return {
        link: function ($scope, $element, $attrs) {
            $scope.$watch($attrs.dynamicHtml, function (html) {
                $element.empty().append($compile(html)($scope));
            });
        }
    };
}]);

You can then use this directive in place of ngBindHtml:

<p dynamic-html="jsonText"></p>

It's important to note that when compiling HTML yourself, you are bypassing contextual escaping, so exercise caution and only use it with trusted content.

Answer 3

Answer №2

The issue here lies in the fact that you are directly inserting plain text into the DOM. Your filter is only adding a chunk of HTML text that contains the ng-click directive, which the browser doesn't recognize as anything other than an attribute.

To resolve this, you must first compile the template using the $compile service before inserting it into the DOM.

Answer 4

The issue here lies in the fact that you are directly inserting plain text into the DOM. Your filter is only adding a chunk of HTML text that contains the ng-click directive, which the browser doesn't recognize as anything other than an attribute.

To resolve this, you must first compile the template using the $compile service before inserting it into the DOM.

Click event not functioning in programmatically loaded HTML

Answer №1

Answer №2

Similar questions

Creating dynamic routes for custom locales in Next.js

Tips for retrieving the clicked word in JavaScript

A step-by-step guide on incorporating Google Ads Manager Ads units (Banners) into your website with NuxtJs and VueJs

Struggling to construct a binary tree as my descendants are not arranged in the right sequence

Meteor: How to upload an image file by utilizing the FileReader on the client side and Npm requiring "fs" on the server side

Error: The function cannot be called because it is undefined

The Google Drive API in Node.js is notifying the deletion of files

Error 405 occurring due to Jersey and AngularJs conflict

There seems to be an issue with the Url.Action method as it

Is it possible to update the anchor to direct to the data-url attribute of the page?

File download is initiated through an Ajax response

Notification pop-up for accepting cookies on a website

Tips for confirming a sub string is present in an array using JavaScript/TScript

Is it possible to prompt npm to install a sub-dependency from a GitHub pull request?

How to access additional legend labels in c3.js or billboard.js using JSON data?

What is the method to access nested JSON data returned from the Angular JS $http service?

How can I ensure the carousel stays centered on a webpage even after resizing the browser window?

Making adjustments to a Jquery data attribute can have a direct impact on CSS

Tips on verifying the outcome of a $http.post() request using POSTMAN

Issue with React's handleChange function in two separate components