How to render a directive inside a pane.

[golden-layout]

How to render a directive inside a pane.

[bfattori]

When you say directive, and what your code looks like here, indicates to me that you're using Angular. If so, you should look at their Angular examples. I started with that and converted it to load the state and container into the scope. Then I compile the directive with the scope. This is much better than re-initializing Angular each time. For the AngularComponent piece, I have this:

var AngularModuleComponent = function( container, state ) {
    // Get the Angular and Module injectors, the latter is required so
    // that the $compile method can find the Angular components in those modules.
    var $injector = angular.injector(['ng', 'MyApp']),
        $compile = $injector.get('$compile'),
        $rootScope = $injector.get('$rootScope');

    // The template is super-simple... it just invokes the directive.
    var html = "<" + state.directive + "></" + state.directive + ">",
        element = container.getElement();

    // Compile the DOM to initialize the directive. The Golden Layout container
    // and state are passed on the scope into the directive.
    var scope = $rootScope.$new();
    scope.container = container;
    scope.state = state;
    element.html($compile(html)(scope));
};

This avoids bootstrapping Angular for each component, also allowing you to specify your ng-app in the body element if you want. You'll need to compile your Angular templates using something like grunt-angular-templates ahead of time. Then you can set up one of your components like so:

angular.module('MyApp')
        .controller('LoginController', LoginController)
        .directive('login', ['$templateCache', function($templateCache) {
            return {
                restrict: 'E',
                replace: true,
                template: function() {
                    return $templateCache.get('wwwroot/js/templates/login.html');
                },
                controller: LoginController
            }
        }]);

Hopefully this helps you out!

[prashantkhandelwal]

Thanks @bfattori I will give this a try.

[prashantkhandelwal]

Thanks @bfattori. Your solution worked. I have to tweaked the module as I have implemented main module a bit differently. But rest everything went well. :)