angular.js binding expressions

Question

I have a pastebin-like app. I want to be able to paste in code, and output the code to a user, with some highlightings and other fanciness. The code can be of ANY language. I use google's prettify.js for this.

The code is saved in a db as a string. Heres how i get the data:

$http.get('/paste/' + $scope.paste).success(getCallback);

var getCallback = function(data) {
    setTimeout(function() {
        $scope.paste = data[0].code;
        $scope.$apply();
    }, 0);
};

So far so good. When i want to apply some highlighting to the pasted code i have done this.

app.filter('pretty', function() {
    return function(text) {
        // a method in the prettify.js
        return prettyPrintOne(text, '', true);
    };
});

And i apply it like this:

<pre ng-bind-html="paste|pretty"></pre>

The result is a nice-looking paste. However the angular sanitizer fails when theres tags like <?php of similar that it does not understand, or tags that are pure html elements <div> So how could i bind the expression with the html formatting to the paste.

If i only do ng-bindi actually get the correct data showing, including tags like <?php (in html comments?) but the formatting goes out of the window.

to see if I understand it: you want to keep displaying code (using bind-html), and at the same time apply html style formatting to that code? — Jorg
– Jorg, Commented Feb 22, 2014 at 13:00
have you taken a look at this? docs.angularjs.org/api/ng/service/$sce — Mark-Sullivan
– Mark-Sullivan, Commented Feb 22, 2014 at 13:01
@Jorg Yeah, the code needs to be styled, not just "plain" there has to be code highlighting. The prettify gives me generated html, and that can be bound to ng-bind-html, but the parser dont dig html/php (possibly other language) elements. — pat
– pat, Commented Feb 22, 2014 at 13:23
@Mark-Sullivan Yeah, just had a look at that. Will have to investigate on how to implement this. — pat
– pat, Commented Feb 22, 2014 at 13:24

user3340645 · Accepted Answer · 2014-02-22 13:38:11Z

0

It looks like prettify.js does not understand PHP correctly. When you enter some PHP code, it just creates a line which is not commented. This works using $sce with JavaScript and other languages supported by "prettify.js" though:

http://plnkr.co/edit/ajQrnmBB83SLmFvzfiBr?p=preview

answered Feb 22, 2014 at 13:38

user3340645

1

Sign up to request clarification or add additional context in comments.

3 Comments

pat Over a year ago

Thanks for your Plunker. However, i'm absolutely sure that this is not a prettify.js thing. If you try your plunker with a html element it will also fail. In fact anything with starting with "<" will fail. (<div>, <?php etc..) This is def a problem with the sanitizer/ng-bind.

user3340645 Over a year ago

I have updated the Plunkr with a small PHP snippet and console.log(text). At least the "prettyPrintOne" function gives me that:"<ol class="linenums"><li class="L0"></li></ol>". According to stackoverflow.com/questions/1270221/…, PRISM is a better alternative to prettify.js - it is even used on Brendan Eich's personal blog. soundcloud.com/istdochmiregal/neo-magazin-prism-is-a-dancer

pat Over a year ago

Ok, thanks, ill investigate further. I have already implemented prettyprint, but maybe ill try with the nsa.js instead and open a backdoor.

Collectives™ on Stack Overflow

angular.js binding expressions

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related