2

I would like to remove some of the elements that are brought into the DOM by this...

<div ng-bind-html-unsafe="whatever"></div>

I wrote a function that will remove the elements, but I need a way to trigger the function after ng-bind-html-unsafe is complete. Is there a callback for ng-bind-html-unsafe or a better approach?

2 Answers 2

1

ng-bind-html-unsafe has been removed from the current version (1.2+) of angular. I would recommend using the $sanitize service in the new version of angular. You'll need to include the sanitize library and add it to your module.

That way you can do whatever you want once the sanitize operation is complete and not worry about a callback.

A quick and dirty implementation:

<!doctype html>
<html lang="en">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.js"></script>
  <script src="libs/angular/angular-sanitize.js"></script>
</head>
<body ng-app="myApp">
  <div ng-controller="myController">
    <div>{{sanitized}}</div>
  </div>
  <script>
    angular.module('myApp', ['ngSanitize'])
      .controller('myController', ['$scope', '$sanitize', function($scope, $sanitize) {
        $scope.sanitized = $sanitize('someTextFromSomeSource');
        // Do whatever you want here with the cleaned up text
      }])
  </script>
</body>
</html> 
Sign up to request clarification or add additional context in comments.

Comments

0

I would move the html in your demo to a directive:

<div ng-bind-html-unsafe="whatever"></div>

in the directive I would manipulate the html based on my needs, I am here basing this on an assumption since I am not sure how often or how whatever variable is being updated so the generic solution will be a $watch listener over this variable like this:

$scope.$watch('whatever',function(newValue,oldValue, scope){
     //do something
});

All this code in my new directive, probably you will want to use the postLink function

Here is the Documentation from Angular about this.

Post-linking function Executed after the child elements are linked. It is safe to do DOM transformation in the post-linking function.

4 Comments

The content is static, but includes references to external CSS files. I am attempting to remove those references, with something like... querySelectorAll('[rel="stylesheet"]') so I just need to know after its loaded the first time.
You don't manipulate html in your controller that is not a correct practice the directive has what you need. It is what is recommended in angular.
Will the directive execute on the element before or after ng-bind-html-unsafe is complete?
here is a plunker demo: plnkr.co/edit/c8WVtojWGVRAyEu0iLuW?p=preview try extending it with your code it will give us a better idea how to help you

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.