我试图创建AngularJS网站，由用户生成的内容驱动的，它可以使用自定义标记，如 [js- code] ... [/ js- code] 来显示这些板块里面不同的文本。

I am trying to create a website with AngularJS, driven by user-generated content, which can use custom tags such as [js-code]...[/js-code] to display the text inside those sections differently.

该API向我发送包含标签，在客户端解析正文的一个字符串。

The API sends me a single string of body text which contains the tags, to be parsed on the client.

如果我是使用原生的JavaScript或JQuery的，我想我会通过每个字符迭代，增加了一个DOM元素，当我遇到这些标签中的一个，我会创建一个格式化的标签来确定一个新的DOM元素

If I were using native JavaScript or JQuery, I suppose that I would iterate through each character, adding to a DOM element, and when I encountered one of these tags, I would create a new DOM element with formatting determined by the tag.

不过，在AngularJS，我们从JavaScript中code执行DOM操作气馁。

However, in AngularJS, we are discouraged from performing DOM manipulations in JavaScript code.

我无法想象的方式来完成我的目标，只用AngularJS指令。

I cannot conceive of a way to accomplish my goal, using just AngularJS directives.

这是额外的复杂性在于，文本需要编辑，实时的preVIEW。这似乎preclude切片串入部分的阵列。 （也许它没有;它只是好像这将是太慢了）

An additional complication is that the text needs to be editable, with real-time preview. This would seem to preclude slicing the string into an array of sections. (Maybe it doesn't; it just seems like it would be too slow.)

是否有可能做我的AngularJS范围内尝试？如果是这样，怎么样？

Is it possible to do what I am attempting within the AngularJS framework? If so, how?

推荐答案

Plnkr演示

您可以利用角的模板引擎来构建自己的生活模板编辑器完成定制code标记。

You can leverage Angular's templating engine to build your own live template editor complete with custom code tags.

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 code模板

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