angular.js - How to parse the html generated in the instruction

Question

return {
            restrict: 'EA',
            link: function (scope, element, attr) {
                element.bind('mouseenter', function() {
                    this.after("<p style='position: absolute;'><img src=" + this.src + " /></p>")
                });
            }
        }

For example, as shown above, using jquery’s after method, this p is displayed as a string on the page. How can it be parsed directly?

Answer 1

Use $compile

Written a small online demo

http://embed.plnkr.co/egEOkZv...

Answer 2

This is caused by the quotation marks in the title of the question

this.after("<p style='position: absolute;'><img src=" + this.src + " /></p>")

Obviously the url here is missing a quotation mark. The src of img should be wrapped in quotation marks. You can add single quotation marks on both sides

this.after("<p style='position: absolute;'><img src='" + this.src + "' /></p>")

Your string on the page is also src without quotes