The ngBindHtml directive is failing to display sanitized HTML content

Question

The ngBindHtml directive is failing to display sanitized HTML content

I am encountering an issue with my Angular app where I am trying to insert HTML into the page using ngBindHtml, but it does not seem to be working. Take a look at my code below:

<main id="main" ng-bind-html="oreGen | trust"></main>

Here is my Angular app setup:

angular.module('programApp', ['programApp.controllers','programApp.filters','ngSanitize']);

angular.module('programApp.controllers', [])
  .controller('programController', ['$scope', '$filter', function($scope, $filter){
    $scope.oreGen = '<div class="oreFunction" ng-click="collectFunction(\'parenthesis\', 1)">test text</div>';
    $scope.collectFunction = function(value1, value2){
      alert(value1 + value2);
    };
  }]);

angular.module('programApp.filters', []).filter('trust', ['$sce', function($sce){
  return function(text) {
    return $sce.trustAsHtml(text);
  };
}]);

Upon loading the page, nothing appears within the main element.

Here is the link to the Codepen for reference: http://codepen.io/trueScript/pen/MwbVpO?editors=101

It seems that the div being ngBinded does not display. Any insights on why this might be happening?

javascript angularjs ng-bind-html ng-bind ngsanitize

Answer 1

Answer №1

If you're looking to enhance functionality, consider utilizing a directive in place of a filter. Take a peek at this JSFiddle example

Snippet of HTML code:

<div ng-app="myApp" ng-controller="programController">
    <dir id="main" content="oreGen"></dir>
</div>

JavaScript snippet:

angular.module('myApp', [])
.controller('programController', ['$scope', '$filter', function ($scope, $filter) {
    $scope.oreGen = '<dir class="oreFunction" ng-click="collectFunction(\'parenthesis\', 1)">test text</dir>';
    $scope.collectFunction = function (value1, value2) {
        alert(value1 + value2);
    };
}])
.directive('dir', function ($compile, $parse) {
    return {
        restrict: 'E',
        link: function (scope, element, attr) {
            scope.$watch(attr.content, function () {
                element.html($parse(attr.content)(scope));
                $compile(element.contents())(scope);
            }, true);
        }
    }
});

Answer 2

If you're looking to enhance functionality, consider utilizing a directive in place of a filter. Take a peek at this JSFiddle example

Snippet of HTML code:

<div ng-app="myApp" ng-controller="programController">
    <dir id="main" content="oreGen"></dir>
</div>

JavaScript snippet:

angular.module('myApp', [])
.controller('programController', ['$scope', '$filter', function ($scope, $filter) {
    $scope.oreGen = '<dir class="oreFunction" ng-click="collectFunction(\'parenthesis\', 1)">test text</dir>';
    $scope.collectFunction = function (value1, value2) {
        alert(value1 + value2);
    };
}])
.directive('dir', function ($compile, $parse) {
    return {
        restrict: 'E',
        link: function (scope, element, attr) {
            scope.$watch(attr.content, function () {
                element.html($parse(attr.content)(scope));
                $compile(element.contents())(scope);
            }, true);
        }
    }
});

The ngBindHtml directive is failing to display sanitized HTML content

Answer №1

Similar questions

What is the process for changing colors once vertex colors have been updated?

How can I efficiently include all css from node_modules in vuejs?

Transform the array of objects into different clusters

What causes a ReactJS component to disappear upon page refresh?

Leveraging Multiple MongoDB Databases in Meteor.js

How to deactivate the mobile hardware back button functionality in Ionic 2

React fails to display the content

Unveiling the approach to accessing a nested function with jQuery

ReactJS does not update the conditional CSS class when hovering with mouseOnEnter or mouseOnOver

Having trouble retrieving data from the table with AJAX and CodeIgniter

Tips for customizing the appearance of grouped rows in a Vuetify datatable with the use of slots

The frisbyjs test is not passing due to the absence of proper HTTP headers being sent by the get()

What methods are available to verify the local installation of an NPM package that I have released?

How to sequentially load multiple obj files in Three.js

Exploring the DOM, store all anchor elements inside a <ul> tag with a specific ID in an array

The tubular.js Youtube video background is overlapping my other components on the site, instead of displaying behind them as intended

How can I color the first, second, and third buttons when the third button is clicked? And how can I color all the buttons when the fourth button is clicked?

Obtain a string with commas separating the elements of an array

Exploring the integration of angular-ui-select into an angular seed project

What is the process for setting up a system where the database alerts the server, which then sends out new data to the client application