[英]AngularJS + highlight.js (to evaluate string with expression in directive)
我正在尝试创建一个highlight.js指令,我在使用范围变量时遇到问题。
<script src="http://code.jquery.com/jquery-1.8.2.min.js" ></script>
<link rel="stylesheet" href="http://yandex.st/highlightjs/7.3/styles/default.min.css">
<script src="http://yandex.st/highlightjs/7.3/highlight.min.js"></script>
<div ng-app="app">
<div ng-controller="MyCtrl">
<snippet><script src="{{src}}"></script></snippet>
{{src}}
</div>
</div>
function MyCtrl($scope) {
$scope.src = "foo.js";
}
app.directive('snippet', ['$timeout', function($timeout) {
var template = '<pre><code></code></pre>';
return {
restrict: 'E',
compile: function(tElement, tAttrs, transclude) {
var rawCode = tElement.text();
tElement.html(template);
return function(scope, element, attrs) {
$timeout(function() {
scope.$apply(function() {
var formattedCode = hljs.highlightAuto(rawCode);
$(element).find('code').html(formattedCode.value);
});
}, 0);
}
}
}
}]);
这是小提琴: http : //jsfiddle.net/dkrotts/RE7Jj/5/
如您所见,$ scope.src未在代码段内应用其值。 我究竟做错了什么?
关键是你应该使用$ interpolate而不是$ compile
$ interpolate的描述
将带有标记的字符串编译为插值函数。 HTML $编译服务使用此服务进行数据绑定。 请参阅$ interpolateProvider以配置插值标记。
当你使用$ complie时,它会把你的字符串变成元素。
$ compile的描述
将一段HTML字符串或DOM编译成模板并生成模板函数,然后可以将其用于将范围和模板链接在一起。
(说实话,在尝试之前我并不真正理解这些描述。)
这是工作插件
app.controller('MainCtrl', function($scope) {
$scope.cdnPath = "//path/to/cdn/";
$scope.version = "1.0";
});
app.directive('snippet', ['$timeout', '$interpolate', function($timeout, $interpolate) {
return {
restrict: 'E',
template:'<pre><code ng-transclude></code></pre>',
replace:true,
transclude:true,
link:function(scope, elm, attrs){
var tmp = $interpolate(elm.find('code').text())(scope);
$timeout(function() {
elm.find('code').html(hljs.highlightAuto(tmp).value);
}, 0);
}
};
}]);
你需要$编译内部HTML。 见下面的小提琴。 您也不需要在$ apply块中运行w /。
app.directive('snippet', ['$timeout', '$compile', function($timeout, $compile) {
var template = '<pre><code></code></pre>';
return {
restrict: 'E',
compile: function(tElement, tAttrs, transclude) {
var rawCode = tElement.text();
tElement.html(template);
return function(scope, element, attrs) {
var g = $compile(rawCode)(scope);
$timeout(function() {
var text = g[0].outerHTML;
var formattedCode = hljs.highlightAuto(text);
$(element).find('code').html(formattedCode.value);
}, 0);
}
}
}
}]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.