Generieren HTML-Bindungsvorlage für eckige Direktive von Javascript

Question

Ich habe mehrere Unit Tests recennlty geschrieben und ich frage mich, ob es eine Möglichkeit gibt, HTML-String (Binding-Vorlage), die Richtlinie (oder Komponente) von Javascript-Funktion appelliert. Hier ist ein Beispiel.

Ich habe einige Richtlinie und teste ich es wie diese

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

Deklarieren ein Element Zeichenfolge vor allem ein wenig umständlich zu sein scheint, wenn es ein Dutzend von Attributen ist. Es wäre sehr nützlich für Unit-Tests, wenn es eine Funktion gibt, die HTML-String von einem Objekt wie diesem generiert.

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

Und Ausgang wäre natürlich

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

sein Es scheint wie ein häufiges Problem für mich, aber ich kann eine beliebige Winkel, Karma oder Jasmin-Funktionalität nicht finden, die in schriftlicher Form hilfreich wäre, eine solche Funktion.

Answer 1

Sicher können Sie dies tun, würde der Algorithmus im Grunde über Objekteigenschaften iterieren und stringifizieren.

Zuerst müssen Sie das Element Camelcased name in striched umwandeln. Sie können es mit der Funktion Balg (die ich gestohlen habe von this gist, shh).

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

Dann können Sie über jede Eigenschaft auf dem Objekt durchlaufen und die attrs machen und sie schließlich in einem HTML-Tag zusammensetzen.

Das folgende Snippet implementiert eine einfache Lösung mit einer sehr schlechten Fehlerbehandlung und behandelt auch nur Attribute, vielleicht möchten Sie inneren Inhalt und Zeug implementieren.

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