在 Angular 指令中使用 lodash 将数组中的项目组合成 html 字符串

Question

我正在使用一个有趣的 API，该 API 在它自己的对象中返回资源的每个元素。我将来自 ng-repeat 的数据传递到一个指令中，然后我需要返回完整的 HTML 字符串。对 lodash 来说是全新的，并且在弄清楚这一点时遇到了一些麻烦。段类型有很多可能性，我最终需要有案例。 View API Docs

• 链接
• 提及
• 标签
• 标记开始
• 标记结束
• 等

NG 指令

angular.module('Community.directives.feedBody', [])
  .directive('feedBody', function feedBodyDirective() {
    return {
      restrict: 'E',
      link: convertSegments
    };

    function convertSegments($scope, elem, attrs) {
      var content = attrs.content;
    }

  }
);

JSON

[
    {
        "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"
    }
]

UI 路由模板

<feed-body content="{{comment.body.messageSegments}}"></feed-body>

应该返回

<p><b>post</b> from the standard <i>chatter</i> ui with some HTML tags</p>

Answer 1

您不一定需要 lodash 来构建 html 字符串。您可以只使用 for 循环并完成相同的操作：

编辑：我创建了一个plunker that demonstrates the behavior I think you're going for。假设您将 json 数据作为 ` 传递，您可以在从控制器派生内容值的指令中设置一个隔离范围（请注意，我删除了花括号...）：

<feed-body content="comment.body.messageSegments"></feed-body>

在你的控制器中：

  var json = [
       ...
  ];

  $scope.comment = {
      body: {
          messageSegments: json
      }
  };

在你的指令中：

return {
      restrict: 'E',
      scope: {
        content: '='
      },
      link: convertSegments
  };

  function convertSegments(scope, elem, attrs) {
      var content = scope.content;

      function concatenateJson(jsonData) {
          var html = []
          for (var i = 0; i < jsonData.length; i++) {
               if (jsonData[i].type === 'MarkupBegin') {
                  html.push('<' + jsonData[i].htmlTag + '>');
              } else if (jsonData[i].type === 'MarkupEnd') {
                  html.push('</' + jsonData[i].htmlTag + '>');
              } else if (jsonData[i].type === 'Text') {
                  html.push(jsonData[i].text);
              }
          }
          return html.join('');
      }

      var elemHtml = concatenateJson(content);

      elem.html(elemHtml);
  }

  // FYI: running the lodash method 100,000 times took 719 and 552 msecs, respectively
  // running the native for loop instead 100,000 times took 528 and 565 msecs
  // not a large sample size, obv, but not a huge difference between the two one way or the other

  // Using the lodash _.each method would just look like:
  // function concatenateJson(jsonData) {
  //     var html = [];
  //     _.each(jsonData, function(datum) {
  //         if (datum.type === 'MarkupBegin') {
  //             html.push('<' + datum.htmlTag + '>');
  //         } else if (datum.type === 'MarkupEnd') {
  //             html.push('</' + datum.htmlTag + '>');
  //         } else if (datum.type === 'Text') {
  //             html.push(datum.text);
  //         }
  //     });
  //     return html.join('');
  // }