Dynamic controllers

by samu_eyes

HTML

<div ng-app="testApp">
    <div ng-controller="ComponentsController">
        <div ng-repeat="component in components" >
            <p dynamic-controller="'Ctrl'+component.controller+'S'" >
            <span>{{test1}}</span>
            <span>{{test}}</span>
            </p>
        </div>
    </div>
</div>

JavaScript

var module = angular.module('testApp', []);

module
.directive('dynamicController', ['$controller', function($controller) {
    return {
            restrict: 'A',
            scope: true,
            link: function (scope, element, attrs) {
                    
                var locals = {
                    $scope: scope,
                    $element: element,
                    $attrs: attrs
                };
                
                element.data('$Controller', $controller(scope.$eval(attrs.dynamicController), locals));                       
            }
        };
    }
])

.controller('Ctrl1S as a', ['$scope', function ($scope) {
    $scope.test1 = "test 1u <br>";
}])
.controller('Ctrl2S as a', ['$scope', function ($scope) {
    $scope.test = "test 22";
}])

.controller('ComponentsController', ['$scope', function ($scope) {    
    $scope.components = [{
        name: "Wd1",
        controller: "1",
    }, {
        name: "Wd2",
        controller: "2",
    }];
    
    //$scope.test = "test";
}]);