react-2-angular: added generic angular directive loader util that can be used from react

public/app/core/components/grafana_app.ts

@@ -10,6 +10,7 @@ import colors from 'app/core/utils/colors';
 import { BackendSrv, setBackendSrv } from 'app/core/services/backend_srv';
 import { BackendSrv, setBackendSrv } from 'app/core/services/backend_srv';
 import { DatasourceSrv } from 'app/features/plugins/datasource_srv';
 import { DatasourceSrv } from 'app/features/plugins/datasource_srv';
 import { configureStore } from 'app/store/configureStore';
 import { configureStore } from 'app/store/configureStore';
+import { AngularLoader, setAngularLoader } from 'app/core/services/AngularLoader';
 
 
 export class GrafanaCtrl {
 export class GrafanaCtrl {
   /** @ngInject */
   /** @ngInject */
@@ -22,11 +23,13 @@ export class GrafanaCtrl {
     contextSrv,
     contextSrv,
     bridgeSrv,
     bridgeSrv,
     backendSrv: BackendSrv,
     backendSrv: BackendSrv,
-    datasourceSrv: DatasourceSrv
+    datasourceSrv: DatasourceSrv,
+    angularLoader: AngularLoader
   ) {
   ) {
     // sets singleston instances for angular services so react components can access them
     // sets singleston instances for angular services so react components can access them
-    configureStore();
+    setAngularLoader(angularLoader);
     setBackendSrv(backendSrv);
     setBackendSrv(backendSrv);
+    configureStore();
 
 
     $scope.init = () => {
     $scope.init = () => {
       $scope.contextSrv = contextSrv;
       $scope.contextSrv = contextSrv;

public/app/core/services/AngularLoader.ts

+import angular from 'angular';
+import coreModule from 'app/core/core_module';
+import _ from 'lodash';
+
+export interface AngularComponent {
+  destroy();
+}
+
+export class AngularLoader {
+  /** @ngInject */
+  constructor(private $compile, private $rootScope) {}
+
+  load(elem, scopeProps, template): AngularComponent {
+    const scope = this.$rootScope.$new();
+
+    _.assign(scope, scopeProps);
+
+    const compiledElem = this.$compile(template)(scope);
+    const rootNode = angular.element(elem);
+    rootNode.append(compiledElem);
+
+    return {
+      destroy: () => {
+        scope.$destroy();
+        compiledElem.remove();
+      },
+    };
+  }
+}
+
+coreModule.service('angularLoader', AngularLoader);
+
+let angularLoaderInstance: AngularLoader;
+
+export function setAngularLoader(pl: AngularLoader) {
+  angularLoaderInstance = pl;
+}
+
+// away to access it from react
+export function getAngularLoader(): AngularLoader {
+  return angularLoaderInstance;
+}