Ways to compel a JSON-transmitted expression into the Angular scope

Question

Ways to compel a JSON-transmitted expression into the Angular scope

Seeking guidance on the best way to convert HTML from JSON into a trigger for a modal/toggle upon clicking.

Within the JSON data consisting of 100 entries, there are about 10 links that need to activate a pop-up when clicked. These links are displayed as 'Schedule #' (where # ranges from A to G).

My initial approach involves embedding Angular mark-up directly in the JSON and then rendering it into the scope:

Extract from JSON:

"Are the details defined in 
<a href='/#/' class='schedule' 
data-ng-click='modal.active = modal.active === true ? false : true'>
      Schedule G
</a>?"

However, this method is not effective because angular does not recognize the ng-click or the modal directives. While $sce successfully handles trustAsHTML, the expression remains unrecognized.

Am I headed in the right direction?

I have explored $apply, $compile, and $parse documentation but none of them seem to align with my current approach.

Alternatively, would it be more efficient to use regex to identify the 'Schedule' text and then dynamically construct the Angular expression? I am struggling to find a suitable method for tackling this task.

javascript angularjs json angularjs-scope

Answer 1

Answer №1

Although I haven't fully resolved this issue yet, I am confident that the solution regarding direction lies in $compile. I came across this insightful blog article on the topic, which was influenced by a related question on StackOverflow... as mentioned in the post.

Answer 2

Although I haven't fully resolved this issue yet, I am confident that the solution regarding direction lies in $compile. I came across this insightful blog article on the topic, which was influenced by a related question on StackOverflow... as mentioned in the post.

Answer 3

Answer №2

HTML

<p data-ng-bind-html="__services.trustAsHTML(__data.steps[step.text])" data-angular-compile></p>

ANGULAR DIRECTIVE COMPILATION

angular.module('app.directives.AngularCompile', [], ["$compileProvider", function($compileProvider) {
$compileProvider.directive('angularCompile', ["$compile", function($compile) {
    return function(scope, element, attrs) {
        scope.$watch(
            function(scope) {
                return scope.$eval(attrs.angularCompile);
            },
            function(value) {
                element.html(value);
                $compile(element.contents())(scope);
            }
        );
    };
}])
}]);

The JSON object contains HTML links with ng-click attributes and utilizes ng-bind-html. It also uses $sce's trustAsHtml to secure the HTML content. Additionally, a custom angular-compile directive is used to compile the Angular click listener into the application after loading the JSON within a $q promise.

Answer 4

HTML

<p data-ng-bind-html="__services.trustAsHTML(__data.steps[step.text])" data-angular-compile></p>

ANGULAR DIRECTIVE COMPILATION

angular.module('app.directives.AngularCompile', [], ["$compileProvider", function($compileProvider) {
$compileProvider.directive('angularCompile', ["$compile", function($compile) {
    return function(scope, element, attrs) {
        scope.$watch(
            function(scope) {
                return scope.$eval(attrs.angularCompile);
            },
            function(value) {
                element.html(value);
                $compile(element.contents())(scope);
            }
        );
    };
}])
}]);

The JSON object contains HTML links with ng-click attributes and utilizes ng-bind-html. It also uses $sce's trustAsHtml to secure the HTML content. Additionally, a custom angular-compile directive is used to compile the Angular click listener into the application after loading the JSON within a $q promise.

Ways to compel a JSON-transmitted expression into the Angular scope

Answer №1

Answer №2

Similar questions

I am attempting to draw a correlation between two numerical variables

The creation of an indexedDB database and the addition of content encountered an error while trying to perform a 'transaction' on the IDBDatabase

Show and hide a division based on the status of a checkbox

"Unleashing the power of custom servers to tap into the rendered HTML of Next

Position of JSON data response is inaccurate

Can you explain the distinction between querying a database and making a request to an endpoint?

Having trouble with the jQuery file upload plugin when trying to upload files larger than 5 MB

Making adjustments to a JSON object before saving it to a file with Postman and Express

Switching from binary to text in order to retrieve an integer value

Draw rectangles in real-time on a canvas as the mouse is clicked and dragged

The condition is not functioning properly when the array's length is greater than 1

Sending a request from JavaScript to C# methods using AJAX, with no expected response, within an ASP.NET MVC framework

Manage shared nested modules across different modules in Vuex without redundancy

The findById function is encountering errors only on invalid id inputs: Unable to cast value to ObjectId

Load the audio file, pause it, and begin playing it after a few seconds have passed

Javascript Leap Year Determination using nested if-else statements

Preventing a user from inputting a value below 1 in a number input field within Vue 3

Tips on encoding a PHP array into JSON using json_encode

Having trouble getting the Next.js Image component to work with Tailwind CSS

What is the best way to send multiple requests consecutively using the riot-lol-api?