AngularJS 和解析正文

我正在尝试使用 AngularJS 创建一个网站，由用户生成的内容驱动，可以使用自定义标签，例如[js-code]...[/js-code]以不同方式显示这些部分内的文本。

API 向我发送一个包含标签的正文文本字符串，以便在客户端上进行解析。

如果我使用本机 JavaScript 或 JQuery，我想我会迭代每个字符，添加到 DOM 元素，当我遇到这些标签之一时，我会创建一个新的 DOM 元素，其格式由标签确定。

然而，在 AngularJS 中，我们不鼓励在 JavaScript 代码中执行 DOM 操作。

我无法想象仅使用 AngularJS 指令来实现我的目标的方法。

另一个复杂之处是文本需要可编辑并具有实时预览。这似乎排除了将字符串分割成部分数组的可能性。 （也许不是；只是看起来太慢了。）

是否可以在 AngularJS 框架内完成我尝试的事情？如果是这样，怎么办？

Plnkr 演示 http://plnkr.co/edit/uGGM8iWLgOfyAH4DB9Cm?p=preview

您可以利用 Angular 的模板引擎来构建自己的实时模板编辑器，并包含自定义代码标签。

HTML

<h3>Text Editor</h3>
<textarea ng-model="model"></textarea>

<h3>Raw Preview</h3>
<div>
  {{ model }}
</div>
<h3>Live Preview</h3>
<js-code-content model="model">
   Loading...
</js-code-content>

定制指令

  app.directive('jsCodeContent', function($compile) {
     return {
       restrict: 'E',
       scope: {
         model: '=model'
       },
       link: function(scope, element, attr) {
            scope.$watch('model', function(value, oldValue) {

                var model = value || '';
                // encode HTML
                model = angular.element('<div></div>').text(model).html();
                model = model.replace(/\[js:bold\]/g, '<js-bold>');
                model = model.replace(/\[\/js:bold\]/g, '</js-bold>');
                model = model.replace(/\[js:italic\]/g, '<js-italic>');
                model = model.replace(/\[\/js:italic\]/g, '</js-italic>');
                model = model.replace(/\[js:code\]/g, '<js-code>');
                model = model.replace(/\[\/js:code\]/g, '</js-code>');
                model = model.replace(/\[js:hilight\]/g, '<js-hilight>');
                model = model.replace(/\[\/js:hilight\]/g, '</js-hilight>');


                  var e = angular.element('<content></content>');
                  e.html(model);
                  element.empty();
                  element.append(e);
                  $compile(e)(scope);


            });

       }
     }
  });

JS 代码模板

  app.directive('jsCode', function() {
     return {
        restrict: 'E',
        transclude: true,
        template: '<code ng-transclude></code>'
     }
  })
  app.directive('jsBold', function() {
     return {
        restrict: 'E',
        transclude: true,
        template: '<b ng-transclude></b>'
     }
  })      
  app.directive('jsItalic', function() {
     return {
        restrict: 'E',
        transclude: true,
        template: '<i ng-transclude></i>'
     }
  })      
  app.directive('jsHilight', function() {
     return {
        restrict: 'E',
        transclude: true,
        template: '<span class="highlight" ng-transclude></span>'
     }
  })