AngularJS - use <pre> or encode HTML for code examples

Question

I laying out a styleguide with code examples within an AngularJS app.

In the past, I've used <pre>. This no longer seems to work. I've tried it in codepen, and it still parses the HTML.

I do not want this. 

<h1>I DO want this.</h1>

I'm guessing there's a filter to encode or decode the HTML, but I don't know which way I need to go. My intuition tells me I need to encode. However, everytime I try to google search a solution I get the opposite answers of what I want.

So for anyone who's better at googling than I am or know how to do this, please help.

Edit To appease the would be SO demigods, where's the code I ended up with...

This is how I started:

<xmp><button>Some example Button</button></xmp>

<xmp> is deprecated, and has line break/whitespace issues. Couldn't use it.

Next one...

<pre><button>Some example Button</button></pre>

This sucked too, because it still parses the child nodes, meaning would get a button instead of a string.

What I ended up with:

// Template

    <div class="sgForms__ex">
        <div ng-bind-html="sgTrustHtml(buttons)"></div>
    </div>
    <div class="sgForms__code">
        <div ng-bind="buttons"></div>
    </div>

// Controller

angular.module('StyleGuide')
  .controller('StyleGuideFormsController', ['$scope', '$sce', 'ListHelper',
  function ($scope, $sce, listHelper) {

    $scope.sgTrustHtml = function (i) {
        return $sce.trustAsHtml(i);
    };

    $scope.buttons = '<button type="button" class="btn btn-primary">Call to Action</button>' +
        '<button type="button" class="btn btn-default">Secondary CTA</button>'+
        '<button type="button" class="btn btn-default">Inactive</button>';


}]);

I'm still running into an issue with line breaks. Note sure how I'm going to work around that.

Answer 1

The only problem with the code you've shown is that you are using buttons but the scope only has examples. The following snippet shows the HTML parsed, and unparsed.

To display newlines where you are displaying the code, just wrap it with a pre (or use CSS white-space: pre)

var myApp = angular.module('myApp', [])
  .directive('myDirective', ['$sce',function($sce) {}])
  .controller('StyleGuideFormsController', ['$scope', '$sce',
    function($scope, $sce) {
      $scope.sgTrustHtml = function(htmlString) {
        return $sce.trustAsHtml(htmlString);
      };

      $scope.examples = '<button type="button" class="btn btn-primary">Call to Action</button>\n' +
        '<button type="button" class="btn btn-default">Secondary CTA</button>\n' +
        '<button type="button" class="btn btn-default">Inactive</button>';
    }
  ]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">

  <div ng-controller="StyleGuideFormsController">
    <pre><div ng-bind="examples"></div><pre>
    <div ng-bind-html="sgTrustHtml(examples)"></div>
  </div>

</div>

Answer 2

You can use a function strip_tags to clean up your code.

angular.module('filters', []).factory('truncate', function () {
    return function strip_tags(input, allowed) {
      allowed = (((allowed || '') + '')
        .toLowerCase()
        .match(/<[a-z][a-z0-9]*>/g) || [])
        .join(''); // making sure the allowed arg is a string containing only tags in lowercase (<a><b><c>)
      var tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi,
        commentsAndPhpTags = /<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi;
      return input.replace(commentsAndPhpTags, '')
        .replace(tags, function($0, $1) {
          return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : '';
        });
    }
});

Controller:

angular.module('myApp', ['filters'])
.controller('IndexController', ['$scope', 'truncate', function($scope, truncate){

  $('#myDivPre').replaceWith((truncate($('#myDiv'), '<a><br>')));

}]);

HTML:

<div id="myDivPre"></div>