从 javascript 为 angular 指令生成 html 绑定模板

Question

我最近写了几个单元测试，我想知道是否有一种方法可以使 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 功能。

Answer 1

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

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

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

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

以下代码片段实现了一个简单的解决方案，错误处理非常差，而且只处理属性，您可能想要实现内部内容和东西。

function camelCaseToDash(myStr) {
  return myStr.replace( /([a-z])([A-Z])/g, '-' ).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);

从 javascript 为 angular 指令生成 html 绑定模板

Generate html binding template for angular directive from javascript

javascript

jasmine

angularjs

angularjs-directive

karma-runner