我正在构建一个网站来说明常见的应用程序漏洞，例如 SQL 注入。我在用AngularJS and 高亮.js创建交互式示例。

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

Example

这把小提琴 http://jsfiddle.net/Good_man/Lv56y2yy/6/演示如何输入' OR 1=1 --如果用户的输入未经验证或清理，则电子邮件字段中的可能会更改查询的预期行为。

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

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

SELECT * FROM dbo.Users WHERE Email='[email protected] /cdn-cgi/l/email-protection' AND Password=''

我尝试重新初始化 hljs，但是当我执行 Angular 时，会停止更新查询。

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

应用

<script>
    var app = angular.module("app", ['hljs']);
    app.controller("controller", function($scope) {
        $scope.email = "[email protected] /cdn-cgi/l/email-protection";
        $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>

在您提供的 jsfiddle 中，您正在使用角度高亮js http://ngmodules.org/modules/angular-highlightjs在你的情况下基本上是：

1. 获取您提供的模板include指令适用
2. Invokes 高亮js http://highlightjs.readthedocs.org/en/latest/api.html库 API 上template它生成 HTML 标记，其中突出显示的元素具有针对特定语言的正确样式
3. The 突出显示的 HTML 标记然后传递给 angularjs$compile

此后不会发生突出显示 - 特别是即使插值内容发生变化。

解决这个问题的一种方法是使用source指令来自angular-highlightjs这是观察到的，但我认为构建自定义指令更简单。

这里的技巧是手动插入并突出显示内容。我已经更新了你的fiddle http://jsfiddle.net/Lv56y2yy/9/与一个简单的highlight提出这个想法的指令：

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