AngularJS + highlight.js(用指令中的表达式计算字符串)

Question

我正在尝试创建一个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>

​

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未在代码段内应用其值.我究竟做错了什么？

Answer 1

关键是你应该使用$ 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);
        }
    };
}]);

Answer 2

您需要$compile内部 HTML。请参阅下面的小提琴。您也不需要在 $apply 块中运行。

\n\n

app.directive(\'snippet\', [\'$timeout\', \'$compile\', function($timeout, $compile) {\n    var template = \'<pre><code></code></pre>\';\n\n    return {\n        restrict: \'E\',\n        compile: function(tElement, tAttrs, transclude) {\n\n            var rawCode = tElement.text();\n            tElement.html(template);\n\n            return function(scope, element, attrs) {\n\n                var g = $compile(rawCode)(scope);\n\n                $timeout(function() {\n                    var text = g[0].outerHTML;\n                        var formattedCode = hljs.highlightAuto(text);\n                        $(element).find(\'code\').html(formattedCode.value);\n                }, 0);\n            }\n        }\n    }\n    }]);\xe2\x80\x8b\n

\n\n

http://jsfiddle.net/roytruelove/jMC9n/1/

\n