How to prevent AngularJS interpolation on a div?

Question

Is there a way to prevent interpolation on a div? I want to grab the raw html from it and interpolate manually by injecting $interpolate like this:

$scope.report = $interpolate($("#myDiv").html())($scope);

Answer 1

You can use inline templates declared using script tag (https://docs.angularjs.org/api/ng/directive/script)

   <script type="text/ng-template" id="myDivTemplate">
      Hello my name is {{name}}
  </script>

Then interpolate it as

$scope.report = $interpolate($("#myDivTemplate").html())($scope);

Answer 2

Use ngNonBindable directive. Taken from the docs:

<div>Normal: {{1 + 2}}</div> // => Normal: 3
<div ng-non-bindable>Ignored: {{1 + 2}}</div> // => Ignored: {{1+2}}

However, beware that this probably won't compile other directives present in that element.

---

Another option (which is the most correct in my opinion) is to create a directive and capture the content of the element in the compile phase, and then only interpolate it when you need:

app.directive("myDirective", function( $interpolate ) {
  return {
    compile: function( tElement ) {
      var raw = tElement.html();
      return function( scope, element ) {
        var interpolated = $interpolate( raw )( scope );
        // do something with it
      };
    }
  };
});