angularjs-html-provider

Compile html on the fly inside your components using template literals. Useful if you want to write components that render other components with arbitrary templates, such as tables with interactive widgets.

Usage

Inject $scope and the $html provider in a component. Calling $http with $scope as it's only argument will return a tag function.

var html = $html($scope)

function view () {
  return html`<div></div>`
}

Example

my-button.component.js

MyButtonCtrl.$inject = ['$element']

module.exports = {
  controller: MyButtonCtrl,
  bindings: {
    view: '<'
  }
}

function MyButtonCtrl ($element) {
  this.$postLink = function () {
    var world = 'world'
    var el = this.view(world)

    $element.replaceWith(el)
  }
}

page.template.html

<main>
  <page>
    <my-button view="$ctrl.buttonView"></my-button>
  </page>
</main>

page.component.js:

Ctrl.$inject = ['$scope', '$html']

module.exports = {
  controller: PageCtrl,
  templateUrl: '/page.template.html'
}

function PageCtrl ($scope, $html, Button) {
  var html = $html($scope)

  this.onClick = function (value) {
    alert(`Hello ${value}.`)
  }

  this.buttonView = function (world) {
    return html`
      <button style="background-color: red;" ng-click="$ctrl.onClick('${world}')">
        click me!
      </button>`
  }
}

Installation

npm install angularjs-html-provider

License

MIT