实施例

Question

我正在构建一个站点，用于说明常见的应用程序漏洞，例如SQL Injection。我使用 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>

Answer 1

在jsfiddle中，您提供了angular-highlightjs，在您的情况下基本上是这样的：

使用include指令适用
在模板上调用highlightjs库API，该API生成带有特定语言正确样式的突出显示元素的HTML标记
然后将突出显示的HTML标记传递给angularjs $compile

之后不会发生高调 - 特别是即使内插内容发生变化也是如此。

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

这里的技巧是手动插入和突出显示内容。我已经使用简单的highlight指令更新了您的fiddle，该指令提出了这个想法：

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

Answer 2

我刚发现的一种更简单的方法是使用过滤器：

app.filter('highlight', function($sce) {
  return function(input, lang) {
    if (lang && input) return hljs.highlight(lang, input).value;
    return input;
  }
}).filter('unsafe', function($sce) { return $sce.trustAsHtml; })

然后你可以说：

<pre><code ng-bind-html="someScopeVariable | highlight | unsafe"></code></pre>

$ sce需要注入你的应用程序，并告诉Angular显示HTML raw - 你信任它。

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

实施例

应用

2 个答案: