从javascript为角度指令生成html绑定模板答案

【问题标题】：Generate html binding template for angular directive from javascript从javascript为角度指令生成html绑定模板
【发布时间】：2017-05-09 17:11:47
【问题描述】：

我最近编写了几个单元测试，我想知道是否有一种方法可以制作 html 字符串（绑定模板）以从 javascript 函数中吸引指令（或组件）。这是一个例子。

我有一些指令，我正在像这样测试它

function test($rootScope, $compile) {
    var scope = $rootScope.$new();
    var elem = $compile(angular.element(
        '<app-foo-bar attr1="val1" attr2="val2"></app-foo-bar>'
    ))(scope);
    scope.$apply();
}

声明一个元素字符串似乎有点尴尬，尤其是在有十几个属性的情况下。如果有一个函数可以从这样的对象生成 html 字符串，那么单元测试将非常方便。

genHtmlString('fooBar', {
    attr1: 'val1',
    attr2: 'val2'
});

输出当然是

<app-foo-bar attr1="val1" attr2="val2"></app-foo-bar>

这对我来说似乎是一个常见问题，但我找不到任何有助于编写这样一个函数的 angular、karma 或 jasmine 函数。

【问题讨论】：

标签： javascript angularjs angularjs-directive jasmine karma-runner

【解决方案1】：

当然可以，算法基本上会遍历对象属性并将其字符串化。

首先，您必须将元素驼峰名称转换为虚线。你可以使用下面的函数来做到这一点（我从this gist偷来的，嘘）。

function camelCaseToDash(myStr) {
  return myStr.replace( /([a-z])([A-Z])/g, '$1-$2' ).toLowerCase();
}

然后您可以遍历对象上的每个属性并渲染属性，最后将其组合到一个 html 标记中。

下面的 sn-p 实现了一个简单的解决方案，错误处理很差，也只处理属性，你可能想实现内部内容和东西。

function camelCaseToDash(myStr) {
  return myStr.replace( /([a-z])([A-Z])/g, '$1-$2' ).toLowerCase();
}

function genHtmlString(elmName, props) {

  props = props || {};

  var
    tagName = camelCaseToDash(elmName),
    htmlString = '<' + tagName;

  Object.keys(props).map(function(key) {
    htmlString += ' ' + (camelCaseToDash(key) + '="' + props[key] + '"');
  });

  return htmlString + '></' + tagName + '>';
}

var htmlString = genHtmlString('fooBar', {
  attr1: 'val1',
  attr2: 'val2',
  A: 'b',
  b: '',
  attrWithMultipleWords: 'HORAY!'
});

console.log(htmlString);

【讨论】：

比我想象的要容易。谢谢！