Angularjs 如何将数组中的字符串组合起来，以创建具有角度的HTML标记？

我以前从未见过API能做到这一点，但我正在使用我所拥有的。这是我正在处理的API响应体的一部分

"body": {
  "isRichText":true,
  "messageSegments":[
    {
      "htmlTag":"p",
      "markupType":"Paragraph",
      "text":"",
      "type":"MarkupBegin"
    },
    {
      "text":"This is a ",
      "type":"Text"
    },
    {
      "htmlTag":"b",
      "markupType":"Bold",
      "text":"",
      "type":"MarkupBegin"
    },
    {
      "text":"post",
      "type":"Text"
    },
    {
      "htmlTag":"b"
      ,"markupType":"Bold",
      "text":"",
      "type":"MarkupEnd"
    },
    {
      "text":" from the standard ",
      "type":"Text"
    },
    {
      "htmlTag":"i",
      "markupType":"Italic",
      "text":"",
      "type":"MarkupBegin"
    },
    {
      "text":"chatter",
      "type":"Text"
    },
    {
      "htmlTag":"i",
      "markupType":"Italic",
      "text":"",
      "type":"MarkupEnd"
    },
    {
      "text":" UI with some HTML tags",
      "type":"Text"
    },
    {
      "htmlTag":"p",
      "markupType":"Paragraph",
      "text":"\n",
      "type":"MarkupEnd"
    }
  ]
}

我需要组合这些片段中的每一个，以便创建最终成为段落标记内部的一个元素（在本例中）

HTML

<div ng-repeat="bodyElement in post.body.messageSegments">
  <!-- ng-if maybe? -->{{bodyElement.htmlTag}} {{bodyElement.text}}
</div>

{{bodyElement.htmlTag}{{bodyElement.text}

---

完成此任务的最佳方式是什么？它是直接在js文件中，还是我应该尝试在模板中使用？

这里有一点角度魔法。控制器代码（需要注入$sce）：

var标记=“”
对于（变量i=0；i<$scope.messageSegments.length；i++）{
//console.log（标记）
if（$scope.messageSegments[i].type=='MarkupBegin'）{
标记=标记+“”
}
else if（$scope.messageSegments[i].type=='MarkupEnd'）{
标记=标记+“”
}
否则{
markup=markup+$scope.messageSegments[i].text
}  
}
$scope.markup=标记；
$scope.markup=
$sce.trustAsHtml（加价）；

并按如下方式在HTML中绑定：

<div  ng-bind-html="markup"></div>

---

是一个plunker。

我的建议是创建一个服务来解析消息段，并创建一个指令来显示结果

以下是一个工作示例：

服务

服务

$messageSegment

有两种方法：

parse

和

parseHttpResponse

。后者可用于

$http

请求的

transformResponse

config选项中

angular.module('myApp')
  .factory('$messageSegment', messageSegmentFactory);

function messageSegmentFactory() {
  var $messageSegment = {};

  $messageSegment.parse = function(arr) {
    var html = '';

    if (!angular.isArray(arr) || !arr.length)
      return html;

    do {
      var segment = arr.shift();
      switch (segment.type) {
        case 'Link':
          html += '<a href="' + segment.url + '">' + segment.text + '</a>';
          break;
        case 'Mention':
          html += '<a href="/users/' + segment.user.id + '">' + segment.text + '</a>';
          break;
        case 'Hashtag':
          html += '<a class="hashtag">' + segment.text + '</a>';
          break;
        case 'MarkupBegin':
          html += '<' + segment.htmlTag + '>';
          break;
        case 'MarkupEnd':
          html += '</' + segment.htmlTag + '>';
          break;
        default:
          html += segment.text;
      }
    } while (arr.length);

    return html;
  };

  $messageSegment.parseHttpResponse = function(data) {
    return $messageSegment.parse(data.body.messageSegments);
  };

  return $messageSegment;
}

用法

---

在应用程序中，您可以执行类似于

的操作，其中

myUrl

是一个范围变量，它告诉指令要命中的

$http

端点。

所有html都需要在视图之外手动创建。显然，API被设置为通过模板脚本运行。如果找不到用于将其解析为html的库，将需要大量的工作。这是带有参考文档的公共API吗？@charlietfl你喜欢跟着我吗：）谢谢。文档是公开的，但您将无法到达终点。Salesforce Chatter API必须假设他们有SDK将其解析为html。我自己从零开始就做过类似的事情，如果你必须覆盖所有的标签，那将是一项繁重的工作…特别是如果你将包括表单标签。。。并且需要一段时间来整理表单控件并tested@charlietfl我可以做一些一般性的事情，比如

每个.messageSegment（如果是htmlTag，那么是“”else text）

？这是我的第一个angular应用程序，所以我不确定最好的处理方法是什么。$http请求在一家工厂这里是我几年前玩过的概念证明。。。。给你一个想法Dt结构略有不同，但概念可能会帮助你。angular在创建元素插入到domWow之前，不能做太多，这太棒了！由于我以前从未使用过

transformResponse

，您能否提供一个这样的示例？从我刚刚阅读的文档来看，里面似乎有几个选项。谢谢！我回答中的“sfChatter”指令使用transformResponse。哈哈！完全错过了。史诗。谢谢你，肖恩

angular.module('myApp')
  .factory('$messageSegment', messageSegmentFactory);

function messageSegmentFactory() {
  var $messageSegment = {};

  $messageSegment.parse = function(arr) {
    var html = '';

    if (!angular.isArray(arr) || !arr.length)
      return html;

    do {
      var segment = arr.shift();
      switch (segment.type) {
        case 'Link':
          html += '<a href="' + segment.url + '">' + segment.text + '</a>';
          break;
        case 'Mention':
          html += '<a href="/users/' + segment.user.id + '">' + segment.text + '</a>';
          break;
        case 'Hashtag':
          html += '<a class="hashtag">' + segment.text + '</a>';
          break;
        case 'MarkupBegin':
          html += '<' + segment.htmlTag + '>';
          break;
        case 'MarkupEnd':
          html += '</' + segment.htmlTag + '>';
          break;
        default:
          html += segment.text;
      }
    } while (arr.length);

    return html;
  };

  $messageSegment.parseHttpResponse = function(data) {
    return $messageSegment.parse(data.body.messageSegments);
  };

  return $messageSegment;
}

angular.module('myApp')
  .directive('sfChatter', sfChatterDirective);

sfChatterDirective.$inject = ['$http', '$messageSegment'];
function sfChatterDirective($http, $messageSegment) {
  return {
    restrict: 'E',
    link: postLink
  };

  function postLink(scope, iElement, iAttrs) {
    iAttrs.$observe('url', function(value) {
      var url = scope.$eval(value);
      $http({
        url: url,
        method: 'GET',
        transformResponse: $messageSegment.parseHttpResponse
      }).then(function(res) {
        iElement.html(res.data);
      });
    });
  }
}