Display a custom AngularJS directive on content loaded through $http request

Question

Display a custom AngularJS directive on content loaded through $http request

I'm facing a dilemma. I have created a directive

app.directive('a', function() {
    return {
        restrict: 'E',
        link: function(scope, elem, attrs) {
            elem.on('click', function(e){
                e.preventDefault();
                alert('Hyperlinks not allowed!');
            });
        }
    };
});

and I also have an $http request to fetch JSON data for the page

{
    "currentNodeName":"Page 1",
    "childrenNodes":[
        {"id":"3","name":"Page 1-1"},
        {"id":"4","name":"Page 1-2"}],
    "parentNode":null,
    "currentNodeContent":[
        {"content":"<p>This is Page1. <a href=\"http://badlink.org/i/dont/want/to/work\">Link</a></p>"}],
    "currentNodeId":"1"
}

The content of currentNodeContent is then loaded into a div

<div id="loadedContent" ng-bind-html="boardCtrl.nodeData.currentNodeContent[0].content"></div>

Now, my question is: How can I make sure that the <a> tag in the loaded content functions as a directive?

Thank you.

javascript angularjs angularjs-directive

Answer 1

Answer №1

To get closer to a correct solution, you can refer to the information provided at this Stack Overflow discussion. However, a more efficient approach would involve the following code:

app.directive("secureBind", function($compile) {
    return {
        link: function(scope, element, attrs) {
             scope.$watch(attrs.secureBind, function(newData) {
                  element.html(newData);
                  $compile(element.contents())(scope);
             });
        }   
    };  
});

The ng-bind-html only assigns the data to the html without running $compile on it (refer to this GitHub source). However, this method doesn't inform contained directives when their value changes. A more enhanced version is as follows:

app.directive("secureBind", function($compile) {
    return {
        link: function(scope, element, attrs) {
            var childScope;
            scope.$watch(attrs.secureBind, function(newValue, oldValue) {
                if (!newValue && !oldValue) return; // handle first run
                if (childScope)
                    childScope.$destroy();
                element.html(newValue || "");
                if (!newValue) return;
                childScope = scope.$new();
                $compile(element.contents())(childScope);
            });
        }
    };
});

This aligns with Angular's perspective. Nonetheless, consider the following points:

You are deviating from the MVC concept.
By restricting elements with directives, you're essentially blacklisting elements, which is generally discouraged. Use a whitelist instead.
Allowing user input in your Angular context poses security risks.

A safer practice involves filtering input HTML through a whitelist function before binding it with ng-bind-html.

Answer 2

To get closer to a correct solution, you can refer to the information provided at this Stack Overflow discussion. However, a more efficient approach would involve the following code:

app.directive("secureBind", function($compile) {
    return {
        link: function(scope, element, attrs) {
             scope.$watch(attrs.secureBind, function(newData) {
                  element.html(newData);
                  $compile(element.contents())(scope);
             });
        }   
    };  
});

The ng-bind-html only assigns the data to the html without running $compile on it (refer to this GitHub source). However, this method doesn't inform contained directives when their value changes. A more enhanced version is as follows:

app.directive("secureBind", function($compile) {
    return {
        link: function(scope, element, attrs) {
            var childScope;
            scope.$watch(attrs.secureBind, function(newValue, oldValue) {
                if (!newValue && !oldValue) return; // handle first run
                if (childScope)
                    childScope.$destroy();
                element.html(newValue || "");
                if (!newValue) return;
                childScope = scope.$new();
                $compile(element.contents())(childScope);
            });
        }
    };
});

This aligns with Angular's perspective. Nonetheless, consider the following points:

You are deviating from the MVC concept.
By restricting elements with directives, you're essentially blacklisting elements, which is generally discouraged. Use a whitelist instead.
Allowing user input in your Angular context poses security risks.

A safer practice involves filtering input HTML through a whitelist function before binding it with ng-bind-html.

Answer 3

Answer №2

Angular utilizes 'a' as a directive with a priority set to '0' (https://docs.angularjs.org/api/ng/directive/a)

To tackle this issue, consider the following steps:

Increase your priority level beyond the defined value, for instance, try 1 or Number.MAX_VALUE.
Enable the terminal option to ensure that lower priorities are not processed.

This approach may just do the trick... :)

Answer 4

Angular utilizes 'a' as a directive with a priority set to '0' (https://docs.angularjs.org/api/ng/directive/a)

To tackle this issue, consider the following steps:

Increase your priority level beyond the defined value, for instance, try 1 or Number.MAX_VALUE.
Enable the terminal option to ensure that lower priorities are not processed.

This approach may just do the trick... :)

Display a custom AngularJS directive on content loaded through $http request

Answer №1

Answer №2

Similar questions

Using the npm package in JavaScript results in a return value of 1

How can I modify this section of the code in Google Script to retrieve all columns?

Always display all options in MUI Autocomplete without any filtering

Angular UI-Select's issue with duplicating tags while adding objects for tagging functionality

Creating an anonymous component in Vue.js involves enclosing the received slots (vnodes) within a wrapper component

Both the maxlenght and ng-maxlength directives appear to be ineffective in AngularJS

Attempting to input a parameter into a personalized directive

What could be causing the malfunction of this Ajax conditional dialog?

Using the result of one function in another function when using async await

Could somebody clarify the situation with the `push` function?

What is the process for spawning a terminal instance within a NodeJS child process?

A program designed to access and retrieve a universal variable

Incorporating a computed variable in a v-select within a VueJs endless loop

Error 403 occurs after submitting the form

Personalizing the React Bootstrap date picker

MongoDB Sorting Techniques

Is it possible for a JavaScript environment to restore function normally after modifying the [[Prototype]] of an object?

Preventing users from copying and pasting information from my form by implementing javascript restrictions

I constantly encounter the error message "Unable to access properties of undefined (reading 'map')"

knockout, loop within a loop