I was looking for the $compile
service. It lets you take any html string or element, and bind it to a scope to run directives. It doesn't require transclude at all.
function svgEachPath($compile) {
return {
restrict: 'E',
// should stop processing directives. we don't want ng-click to apply to the fake element
terminal: true,
priority: 1000,
link: link,
}
function link(scope, el, attrs) {
scope.paths.forEach(function(path) {
// copy in all my attributes to the element itself
Object.keys(attrs)
.filter((key) => key[0] != "$")
.forEach((key) => {
// use snake case name, not camel case
path.attr(attrs.$attr[key], attrs[key])
})
// "compile" the element - attaching directives, etc
var link = $compile(path)
link(scope)
})
}
}
Usage:
<div svg-canvas="urlToSVGContent">
<svg-each-path ng-click="onPathClick(...)">
</svg-each-path>
</div>