Adding directives

Grafana Plugin Development
1

Hello,

I’m writing a datasource and in order to render the query input part, I need to add my own directives but I can’t figure out how to do this properly in the setup here. Is there a simple example of plugins creating directives?

2

Hi,

You should be able to do something like this:

import angular from 'angular';
import _ from 'lodash';

angular.module('grafana.directives').directive("myPluginDirective", function() {
  return {
    templateUrl: 'public/plugins/your-plugin-id/directives/partials/directive_template.html',
    restrict: 'E',
    controller: YourComponentCtrl,
    bindToController: true,
    controllerAs: 'ctrl',
    scope: {
      someProperty: "="
    }
  };
});
3

That’s fantastic. Since this directive is just to help break down my query params page into smaller pieces, I assume I could just have ctrl be a property that’s passed in?

4

Yes that can just be a property you set to a constructor function for the controller

5

How can I link the scope of the directive to my plugin? I understand that I need to know the name of the controller plug-in? What do I need to substitute in this field: controller: YourComponentCtrl,?

6

Do you mean what the value of “your-plugin-id” should be? The plugin id is defined in the plugin.json file for your plugin.

See here for more on the plugin.json file: http://docs.grafana.org/plugins/developing/code-styleguide/#plugin-json-mandatory

7

Hi Torkel,

I am new to grafana environment, I writing grafana plugin, i just want to know how to add my own routing inside the plugin . I tried using the following method but not able to add my own routing.

import { myRoutes } from './my.routes';
angular.module("grafana.routes").config( myRoutes );

 /*@ngInject*/  
export function myRoutes ($routeProvider, $locationProvider) {
...
}

Is that a correct way?
myRoutes function is not invoked.

8

Hi torkel,
I want to add a modal like export-data-modal to my plugin but the modal not show.

1 - > code to show modal(in module.ts):
ctrl.publishAppEvent(‘show-modal’, {
templateHtml: ‘’,
scope,
modalClass: ‘.modal–narrow’,
});

2 -> table_modal.ts(in src directory):
///

import angular from ‘angular’;
import appEvents from ‘app/core/app_events’;
import $ from ‘jquery’;

export class TableModalCtrl {
//private data: any[];
private data: any;
private logs: any;

ok() {
this.dismiss();
}

dismiss() {
appEvents.emit(‘hide-modal’);
}
}

export function tableModal() {
return {
restrict: ‘E’,
templateUrl: ‘public/plugins/sanay-htable/directives/partials/table_modal.html’,
controller: TableModalCtrl,
controllerAs: ‘ctrl’,
scope: {
logs: ‘<’,
data: ‘<’, // The difference to ‘=’ is that the bound properties are not watched
},
bindToController: true,
};
}

angular.module(‘grafana.directives’).directive(‘tableModal’, tableModal);

3 -> table_modal.html(in src directory):
like export-data-modal.html

what is will go wrong?