javascript – 使用AngularJS和Highlight.js进行动态语法突出显示

我正在构建一个说明常见应用漏洞(如SQL注入)的站点.我使用AngularJS和highlight.js来创建交互式的例子.

如何使AngularJS和highlight.js更新我的代码片段？

例

This Fiddle演示如果用户的输入未被验证或消毒,在电子邮件字段中如何输入“Or 1 = 1”可能会更改查询的预期行为.

SELECT * FROM dbo.Users WHERE Email='{{email}}' AND password='{{passworD}}'

当用户输入电子邮件地址和密码时,Angular会更新查询.但是,语法突出显示不会更新.

SELECT * FROM dbo.Users WHERE Email='user@domain.com' AND password=''

我尝试重新初始化hljs,但是当我做角停止更新查询.

hljs.initHighlighTing.called = false;
hljs.initHighlighTing();

应用

<script>
    var app = angular.module("app",['hljs']);
    app.controller("controller",function($scopE) {
        $scope.email = "user@domain.com";
        $scope.password = "";
    })
</script>
<div ng-app="app" ng-controller="controller">
    <div>
        <div class="row">
            <div class="col-sm-4">Email
                <input type="text" class="form-control" ng-model="email">
            </div>
            <div class="col-sm-4">password
                <input type="text" class="form-control" ng-model="password">
            </div>
        </div>
        <br>
        <div hljs include="'compile-me'" compile="true" language="sql"></div>
    </div>
    <script type="text/ng-template" id="compile-me">
        SELECT * FROM dbo.Users WHERE Email = '{{email}}'
        AND password = '{{passworD}}'
    </script>
</div>

app.directive('highlight',function($interpolate,$window){
    return {
    reStrict: 'EA',scope: true,compile: function (tElem,tAttrs) {
      var interpolateFn = $interpolate(tElem.html(),truE);
      tElem.html(''); // stop automatic intepolation

      return function(scope,elem,attrs){
        scope.$watch(interpolateFn,function (value) {
          elem.html(hljs.highlight('sql',value).value);
        });
      }
    }
  };
});