Question

我已经编写了几个单元测试，我想知道是否有办法使javascript字符串（绑定模板）从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>

对我来说这似乎是一个常见问题，但我找不到任何有助于编写此类功能的角色，业力或茉莉花功能。

Answer 1

当然你可以这样做，算法基本上会迭代对象属性并对其进行字符串化。

首先，您必须将元素camelcased名称转换为虚线。你可以使用下面的函数（我从this gist偷走，shh）。

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

然后你可以迭代对象上的每个属性并渲染attrs，最后在html标签中组合它。

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

＆＃13;

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);

＆＃13;

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

1 个答案: