Javascript AngularJS+；highlight.js（使用指令中的表达式计算字符串）

我正在尝试创建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>&lt;script src=&quot;{{src}}&quot;&gt;&lt;/script&gt;</snippet>
        {{src}}
    </div>
</div>

'; 返回{ 限制：'E'， 编译：函数（远程通讯、tAttrs、转置）{ var rawCode=tElement.text（）； html（模板）； 返回函数（范围、元素、属性）{ $timeout（函数（）{ 作用域$apply（函数（）{ var formattedCode=hljs.highlightAuto（rawCode）； $（元素）.find（'code'）.html（formattedCode.value）； }); }, 0); } } } }]);​ 这是小提琴：

正如您所看到的，$scope.src没有在代码段中应用其值。我做错了什么？

您需要修改内部HTML。看下面的小提琴。您也不需要在$apply块中运行w/w

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

'; 返回{ 限制：'E'， 编译：函数（远程通讯、tAttrs、转置）{ var rawCode=tElement.text（）； html（模板）； 返回函数（范围、元素、属性）{ var g=$compile（原始代码）（范围）； $timeout（函数（）{ var text=g[0].outerHTML； var formattedCode=hljs.highlightAuto（文本）； $（元素）.find（'code'）.html（formattedCode.value）； }, 0); } } } }]);​

关键是你应该使用而不是

对$interpolate的描述

将带有标记的字符串编译为插值函数。这 HTML$compile服务使用该服务进行数据绑定。看见 $InterpologeProvider，用于配置插值标记

使用$complie时，它会将字符串转换为元素

对$compile的描述

将一段HTML字符串或DOM编译为模板，并生成 模板函数，然后可用于链接作用域和 模板在一起

（老实说，我直到试过才真正理解这个描述。）

这是工作票

app.controller（'MainCtrl'，函数（$scope）{
$scope.cdnPath=“//path/to/cdn/”；
$scope.version=“1.0”；
});
app.directive（'snippet'，['$timeout'，'$interpolate'，函数（$timeout，$interpolate）{
返回{
限制：'E'，
模板：“

”， 替换：正确， 是的， 链接：函数（范围、elm、属性）{ var tmp=$interpolate（elm.find（'code'）.text（））（范围）； $timeout（函数（）{ elm.find（'code'）.html（hljs.highlightAuto（tmp.value））； }, 0); } }; }]);

---

BTW-这是可行的，但我觉得有一个更优雅的解决方案，使用优先级和转移。有人吗？谢谢！在我把更复杂的东西放进标签里之前，它是有效的。这里有一个更新的提琴正在被打破：这更像是一个jquery问题，请查看Cleaner而不是我的答案。我承认！我发现如果我有

这个代码，我最终会得到

，而不是

标记中的片段。有什么想法吗？
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);
            }
        }
    }
    }]);​

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