AngularJS dynamically injecting controller, class etc

Question

I have a widgets list that is built dynamically. Each widget is represented by html, class, controller and a name. Some of those might be empty (not all widgets require a controller for example). Then I use Gridster to load those widgets dynamically into <li>.

My basic intuition was to ngRepeat those <li>s but the Controller can't be loaded dynamically from a scope variable. I saw various suggestions in this question But I can't fit them into my own code for the following reasons:

The controllers I use don't sit inside the main controller, those controllers may be used in different places
The widgets are created dynamically per user request. Ofcourse I don't let the user choose the html/class/controller to use, those are predefined but he might use some widgets and and he might not.

Perhaps one of those suggestions works for me and I just can't see it, so will appreciate guidance. Here is the relevant code:

Html:

<div class="widgets-background" ng-controller="Investigation2Ctrl" data-ng-init="refetchData();toggleCollapse();initWidgets();">
    <div id="widgets" class="gridster">
        <ul>
            <li data-row="1" data-col="1" data-sizex="1" data-sizey="1" class="yellow" name="Updates Widget">
                <p style="white-space: pre;">{{gridsterUpdates}}</p>
            </li>
            <li ng-repeat="widget in widgetsList" name="widget.name" data-row="1" data-col="2" data-sizex="1" data-sizey="1">
                <div ng-class="widget.widgetClass" ng-include="widget.widgetHtmlInclude" ng-controller="widget.widgetController"></div>
            </li>
        </ul>
    </div>
</div>

JavaScript:

function Investigation2Ctrl($scope, $http, $dialog, DialogService, Config, ApplicationContextService, CaseHierarchyService, GeoService, Logger, $timeout) {

    $scope.widgetsList = [];
    $scope.initWidgets = function() {
        $scope.addWidget('Export Widget', 'partials/investigation/widgets/widget-export.html');
        $scope.addWidget('Timeline Widget', 'partials/investigation/widgets/widget-timeline.html');
        $scope.addWidget('Search Widget', 'partials/investigation/widgets/widget-search.html');
        $scope.addWidget('Facets  Widget', 'partials/investigation/widgets/widget-facets.html', 'FacetsCtrl');
    };

    $scope.addWidget = function(widgetName, widgetIncludeHtml, widgetController, widgetClass) {
        widgetClass = typeof widgetClass !== 'undefined' ? widgetClass : 'widget-container';
        $scope.widgetsList.push({
            'widgetName': widgetName || '',
            'widgetIncludeHtml': widgetIncludeHtml || '',
            'widgetController': widgetController || '',
            'widgetClass': widgetClass || ''
        });
    };
}

Obviously the error I'm getting is widget.widgetController is undefined, which makes since since he tries to load a controller called widget.widgetController

The only option I thought about is creating the <li><div ng-include... html in JavaScript dynamically and injecting it, but well, it sucks.

Vinay K · Accepted Answer · 2015-02-26 11:37:19Z

0

Create a dummy, empty function and use it as controller.

function dummyCtrl() {} // register as controller if required.

widgetController: widgetController ||'dummyCtrl'

answered Feb 26, 2015 at 11:37

Vinay K

5,5721 gold badge20 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

AlexD Over a year ago

Can you explain a bit why is this working and where exactly to put it in regards of my code? Are you trying to solve a scenario where the controller is not needed? Since thats not the issue, ng-controller = ' ' is fine..

Vinay K Over a year ago

Can yo create a plunker/fiddle for this?

Collectives™ on Stack Overflow

AngularJS dynamically injecting controller, class etc

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related