Using directive to work with highlight.js

Posted on   |   In ,   |  
  1. Example of ussing directive to work with highlight.js, or any other jQuery plugin.
  2. Example of ng-transclude.
  3. Example of $interpolate. (It is different from $compile)

<!-- more --> <iframe style="margin:20px 0; width: 100%; height: 300px" src="http://embed.plnkr.co/3rtp1v" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

MarkupGithub
1
2
3
4
 
<snippet>&lt;!--[if IE]&gt;&lt;script src="/js/gaig-ui-ie.js"&gt;&lt;/script&gt;&lt;![endif]--&gt;
    &lt;link rel="stylesheet" href="/css/gaig-bootstrap.css" /&gt;
    &lt;script src="/js/gaig-ui.js"&gt;&lt;/script&gt;</snippet>

AngularJSGithub
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
var app = angular.module('ngApp', [])
    .directive('snippet', ['$timeout', '$interpolate', function ($timeout, $interpolate) {
        "use strict";
        return {
            restrict: 'E',
            template: '
',
            replace: true,
            transclude: true,
            link: function (scope, elm) {
                var tmp = $interpolate(elm.find('code').text())(scope);
                elm.find('code').html(hljs.highlightAuto(tmp).value);
            }
        };
    }]);
app.controller('MainCtrl', ['$scope', function ($scope) {
    'use strict';
    $scope.cdnPath = "//path/to/cdn/";
    $scope.version = "1.0";
}]);