angular-component-binder.js

const angular = require("angular");
const _ = require("lodash");
angular
  .module("modulename")
  .directive("componentBinder", function($compile, $parse) {
    return {
      restrict: "E",
      scope: {
        componentName: "<",
      },
      link(scope, element, attrs, controller, trancludeFn) {
        let transcludeAttrs = _(attrs).omitBy((v, k) => k[0] == "$").omit("componentName").value();
        let attrsString = Object.keys(transcludeAttrs).reduce((agg, k) => {
          return agg + ` ${_.kebabCase(k)}="${transcludeAttrs[k]}"`
        }, "");
        let createElement = $compile(`<${scope.componentName} ${attrsString}/>`);
        element.append(createElement(scope.$parent));
      }
    }
  });