AngularJS: Incorporating directives into dynamically generated HTML from an API call

Question

AngularJS: Incorporating directives into dynamically generated HTML from an API call

I have been working with a REST API that returns pre-generated HTML like this:

<p class="p">
    <sup id="John.3.16" class="v">16</sup>
    <span class="wj">“For </span>
    <span class="wj">God so loved </span>
    <span class="wj">the world,</span>
    <span class="wj">that he gave his only Son, that whoever believes in him should not </span>
    <span class="wj">perish but have eternal life.</span>
</p>

This has posed a new challenge for me in learning AngularJS. Since I can't control the HTML from the API, I wanted to build a class directive on the "v" class to enable an ng-click attribute on the verse number and pass the verse information to another part of my application.

Here is the current code I have, which doesn't seem to be functioning as expected:

var app = angular.module('ProjectTimothy');

app.filter("sanitize", ['$sce', function($sce) {
    return function(htmlCode){
        return $sce.trustAsHtml(htmlCode);
    }
}]);

app.controller("timothy.ctrl.search", ['$scope', '$http', function($scope, $http){
    $scope.url = "http://apiendpoint.com/";
    $scope.copyright = "";

    $scope.search = function() {
        $http.post($scope.url, { "query" : $scope.searchwords, "version": "eng-ESV"})
        .success(function(data, status) {
            $scope.copyright = data.response.search.result.passages[0].copyright;
            $scope.result = data.response.search.result.passages[0].text; 
        })
        .error(function(data, status) {
            $scope.data = data || "Request failed";
            $scope.status = status;         
        });

    };
}]);

app.directive("v", ['$compile', function($compile) {
    return {
        restrict: 'C',
        transclude: true,
        link: function(scope, element, attrs) {
            element.html("<ng-transclude></ng-transclude>").show();
            $compile(element.contents())(scope);
        },
        scope: { id:'@' },
        /*template: "<ng-transclude></ng-transclude>",*/
        replace: false
    };
}]);

HTML template populated with the returned API HTML:

<div class="bible_verse_search_container" ng-controller="timothy.ctrl.search">
    <div class="input-group">
        <input type="text" class="form-control" placeholder="Bible Verse To Read (i.e. John 11:35)" ng-model="searchwords">
        <span class="input-group-btn">
            <button class="btn btn-default" type="button" ng-click="search()">Search</button>
        </span>
    </div>
    <div class="well" ng-show="copyright" ng-bind-html="copyright | sanitize"></div>
    <div ng-bind-html="result | sanitize"></div>
</div>

I hope to populate the bottom div with HTML containing clickable verse numbers by converting them into directives. My goal is to make each verse number clickable and extract the ID attribute to send it along with user content back to my API.

If anything is unclear, please let me know. I'll continue working on this and update if I find a solution.

IN PROGRESS

Referenced this question for guidance:

I'm contemplating whether converting the verse display section into a directive and having the search controller populate a scope variable with server HTML as the directive template would be a better approach... thinking hard!

javascript angularjs angularjs-directive angularjs-compile

Answer 1

Answer №1

In my opinion, implementing your second idea by converting the section where the verse is displayed into a directive would be a great approach.

Instead of having:

<div ng-bind-html="result | sanitize"></div>

You could create a directive like this:

<verse-display verse-html="{{result}}"></verse-display>

The directive definition could be as follows:

app.directive('verseDisplay', ['$compile', function($compile) {

    function handleVerseClick(e) {
        var verseNumber = e.target.id;

        // Add your functionality for handling the verse number here
    }

    return {
        restrict: 'E',
        scope: {
            verseHtml: '@'
        },
        replace: true,
        transclude: false,
        template: '<div ng-bind-html="verseHtml | sanitize"></div>',
        link: function(scope, element, attrs) {
            $compile(element.contents())(scope);
            element.on('click', '.v', handleVerseClick);
        }
    };
}]);

This way, you can easily add your own click event handler to the element.

Check out this demo. (Remember to open the console to view the logged verse numbers.)

Answer 2

In my opinion, implementing your second idea by converting the section where the verse is displayed into a directive would be a great approach.

Instead of having:

<div ng-bind-html="result | sanitize"></div>

You could create a directive like this:

<verse-display verse-html="{{result}}"></verse-display>

The directive definition could be as follows:

app.directive('verseDisplay', ['$compile', function($compile) {

    function handleVerseClick(e) {
        var verseNumber = e.target.id;

        // Add your functionality for handling the verse number here
    }

    return {
        restrict: 'E',
        scope: {
            verseHtml: '@'
        },
        replace: true,
        transclude: false,
        template: '<div ng-bind-html="verseHtml | sanitize"></div>',
        link: function(scope, element, attrs) {
            $compile(element.contents())(scope);
            element.on('click', '.v', handleVerseClick);
        }
    };
}]);

This way, you can easily add your own click event handler to the element.

Check out this demo. (Remember to open the console to view the logged verse numbers.)

Answer 3

Answer №2

While this may not be the most prudent decision on my part, I have to admit that the code is quite intriguing. I can't wholeheartedly recommend running it, but if you're feeling brave, check out this jsfiddle.

I must caution that using this code can potentially execute directives beyond what you intend, opening up various security vulnerabilities. However, if you are confident in the source of your HTML content, feel free to give it a try.

For the complete code snippet, please refer to the fiddle link provided above:

function riskyCompile($compile) {
    return function (scope, element, attrs) {
        var compileWatch = scope.$watch(
          function (scope) { return scope.$eval(attrs.riskyCompile); },
          function (risky) {
            element.html(risky);
            $compile(element.contents())(scope);
            // for optimized performance, only compile once before un-watching
            if (scope.runOnce) {
                // stop watching
                compileWatch();
            }
          });
    };
}

Answer 4

While this may not be the most prudent decision on my part, I have to admit that the code is quite intriguing. I can't wholeheartedly recommend running it, but if you're feeling brave, check out this jsfiddle.

I must caution that using this code can potentially execute directives beyond what you intend, opening up various security vulnerabilities. However, if you are confident in the source of your HTML content, feel free to give it a try.

For the complete code snippet, please refer to the fiddle link provided above:

function riskyCompile($compile) {
    return function (scope, element, attrs) {
        var compileWatch = scope.$watch(
          function (scope) { return scope.$eval(attrs.riskyCompile); },
          function (risky) {
            element.html(risky);
            $compile(element.contents())(scope);
            // for optimized performance, only compile once before un-watching
            if (scope.runOnce) {
                // stop watching
                compileWatch();
            }
          });
    };
}

AngularJS: Incorporating directives into dynamically generated HTML from an API call

Answer №1

Answer №2

Similar questions

Creating self-referencing MongoDB schema with post routes in nodejs: A step-by-step guide

jQuery Hide/Show Not Working as Expected

Exploring the concepts: AngularJS and the significance of undefined, null,

Utilize the jQuery function as a callback argument

Retrieve a variable from a function and store it in a new variable outside of the function's scope

Node.js Error: RegEx Pattern Does Not Match

Looking to toggle text back and forth with a simple click? Here's how!

Is there a way to configure a Mui textfield to only allow numeric input? It currently accepts numbers, the letter "e," and dashes

Encountering a syntax error with JSON.parse() when using MVC 4 Razor with Jquery Ajax

A container that dynamically adjusts its height based on the number of elements added to it, retaining the expanded height even when items are removed

How can ETags be utilized in fetching data?

Is it better to utilize AngularJS $http service for making requests, or should I opt for jQuery AJAX if available

"What is the best way to transform tab navigation into a dropdown menu with the help

Tips on incorporating a firebase object into your Angular application using $scope

There's just something really irritating me about that Facebook Timer feature

Vue3/Vuex - Issue with state change not being reflected in component when utilizing object destructuring

Choosing several checkboxes and populating an array with values - HTML and JavaScript

"I am eager to showcase the text upon pressing the Enter key, implementing an Immediately Invoked Function Expression

Making Angular2 Templates More Efficient with Array.prototype.filter()

merging values from objects within an array