angularjs-html-provider

1.1.0 • Public • Published

angularjs-html-provider

stability downloads js-standard-style

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

Readme

Keywords

Package Sidebar

Install

npm i angularjs-html-provider

Weekly Downloads

0

Version

1.1.0

License

MIT

Unpacked Size

5.85 kB

Total Files

5

Last publish

Collaborators

  • kareniel