0

I have a directive which i am using to highlight code (syntax highlighting). Sometimes this text contains curly braces and angular tries to bind them. How can i disable that binding :

app.directive('highlightJs', ['$timeout',function ($timeout) {
    return {
      restrict: 'AE',
      link    : function (scope,elem,$scope) {
        $timeout(function(){
          var x=elem[0].innerHTML;
          elem[0].innerHTML='<pre><code>'+x+'</code></pre>';
          console.log(x);
          hljs.highlightBlock(elem[0]);
        },0);
      }
    };

Use example:

<highlight-js>
 &lt;img ng-src='{{url}}'/&gt;
<highlight-js>

renders as <img ng-src=""/> and not <img ng-src="{{url}}"/>

Any help would be great.

ritz078
  • 2,193
  • 3
  • 22
  • 24
  • Take a look at this [earlier SO post](http://stackoverflow.com/questions/16868024/how-do-i-escape-curly-braces-for-display-on-page-when-using-angularjs), doing something sort-of similar involving the `code` element and [ngNonBindable](https://docs.angularjs.org/api/ng/directive/ngNonBindable). – James Mar 10 '15 at 19:32
  • @JamesWing I saw that but adding an attribute inside the directive doesn't work anf if i add it to my custom directive, my whole directive won't compile. – ritz078 Mar 10 '15 at 19:39
  • Can you pass the text into the directive as an attribute, so it is data? – James Mar 10 '15 at 21:19
  • No sending data in that way will not be so user friendly. – ritz078 Mar 11 '15 at 16:07

1 Answers1

0

just used this for the solution. Though this may not be a perfect solution still it works.

<highlight-js>
 <code ng-non-bindable>
  {{url}}
 </code>
</highlight-js>
ritz078
  • 2,193
  • 3
  • 22
  • 24