Using directive to work with highlight.js

  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";
}]);