Question

请看看这个plunker：http://plnkr.co/edit/OIFu07GS0ZJQOdmpDnXB?p=preview

我正在尝试使用angular创建语法高亮显示。我的过滤器工作率为80％。正则表达式是正确的但.replace（）它将html“写”为pre上的文本而不是将其呈现为html。

看看你会明白我想做什么。

我知道有codemirror和ace指令，但它们对于我需要的东西来说太大了。

谁知道如何修复它？

正确的输出应该是这样的：

<pre>
    <span class="string">1</span>
    <span class="string">2</span>
    <span class="string">3</span> 
    #This is a mysql syntax highlighter
    -- This is a comment/*
    And this is a multi line comment
    SELECT things FROM table;*/
</pre>

目前pre之间的所有内容都呈现为文本。

任何想法？感谢名单

Answer 1

我认为您不能使用过滤器执行此操作，请尝试使用指令。

以下是一个相当简单的例子。我首先将过滤器更改为服务（如果您愿意，可以使用与$filter类似的过滤器，但我不明白为什么）。然后我使用$interpolate创建一个插值函数，描述为here：

将带有标记的字符串编译为插值函数。 HTML $编译服务使用此服务进行数据绑定。请参阅$ interpolateProvider以配置插值标记。

您可以在示例中看到字符串'1'，'2'和'3'已突出显示，因为我添加了style="color:red"，并且他们也有类。

编辑：使用ngModelController编辑的解决方案，以使用angular的数据绑定在下面的元素中显示textarea的更改。请注意对代码段元素的更改：<snippet ng-model="txt">

var app = angular.module('plunker', ['syntax']);

app.controller('MainCtrl', function($scope) {
  $scope.txt = "1 2 3 \n #This is a mysql syntax highlighter\n-- This is a comment/*\nAnd this is a multi line comment\nSELECT things FROM table;*/\nSELECT \nag.name AS agent, `d.date`, d.first_payment_date, d.account_number, ";
});


angular.module('syntax', [])
  .service('formatter', function () {
    return function (input) {
      if (input) {
        return input.replace(/(\d+)/g, "<span class=\"string\" style=\"color:red\">$1</span>");
      }
    }
})

.directive('snippet', function($timeout, $interpolate, formatter) {
    return {
        restrict: 'E',
        template:'<pre><code></code></pre>',
        replace:true,
        require: '?ngModel',
        link:function(scope, elm, attrs, ngModel){ 
          ngModel.$render = function(){
            var tmp =  $interpolate(scope.txt)(scope);
            elm.find('code').html(formatter(tmp)); 
          }
        }
    };
});

http://plnkr.co/edit/783ML4Y2qH8oMLarf0kg?p=preview

angularjs正则表达式过滤器语法荧光笔

1 个答案: