Directives

Directives are composable web components that have their own views and controller, and can be included using a custom HTML tag. This can be useful when designing re-usable elements that can be shared across projects.

Define the directive:

goog.module("my_project.directives.sample_directive");

class SampleDirectiveCntrl extends Silica.Controllers.Base {

  constructor(element) {
    super(element);
  }

}

let directive = {
  template: `<div class="sample-directive">
      Sample Directive
    </div>`,
  controller: SampleDirectiveCntrl
};

exports.directive = directive;

Import the directive in your app.js

const SampleDirective = goog.require("my_project.directives.sample_directive");

...

Silica.addDirective('sample-directive', SampleDirective.directive);

Use it in your html

<sample-directive></sample-directive>