Dynamic adding controller to ng-include

Question

Is that a dynamic way to change ng-include controller?

My app allows users to create page some content and controllers. I can change ng-include src but I don't know how to dynamic associate a new controller. The following code isn't working:

<div ng-app="MyApp">
    <div ng-controller="ParentController">
        <select ng-model="currentItem" ng-options="item as item.url for item in items track by item.url">
        </select>
        {{ currentItem }}
        <div ng-include src="currentItem.url" ng-controller="currentItem.controller"></div>
    </div>
</div>

And I have the following JS:

var app = angular.module("MyApp",[]);

app.controller('ParentController', ['$scope',function($scope){
    $scope.items = [{
        url: 'page1.html',
        controller: 'Page1Controller'
    },
    {
        url: 'page2.html',
        controller: 'Page2Controller'
    }];
    $scope.currentItem = {};
}]);

app.controller('Page1Controller', ['$scope',function(){
    alert('Page1');
}]);

app.controller('Page2Controller', ['$scope',function(){
    alert('Page2');
}]);

Use directives instead of ng-include, that is what they are meant for. — ajmajmajma
– ajmajmajma, Commented Jun 22, 2015 at 12:53

Community · Accepted Answer · 2017-05-23 12:22:43Z

3

I've done by using a directive instead:

<div ng-include src="currentItem.url" dyn-controller="currentItem.controller"></div>

JS Directive:

app.directive('dynController', ['$compile', '$parse',function($compile, $parse) {
  return {
    restrict: 'A',
    terminal: true,
    priority: 100000,
    link: function(scope, elem, attrs) {
            // Parse the scope variable
            var name = $parse(elem.attr('dyn-controller'))(scope);
            elem.removeAttr('dyn-controller');
            elem.attr('ng-controller', name);

            // Compile the element with the ng-controller attribute
            $compile(elem)(scope);       
  };
}]);

The trick here is watching for attribute changes, add ng-controller and then compile the element.

Thanks for

How to watch property in attrs of directive

and

Dynamic NG-Controller Name

edited May 23, 2017 at 12:22

CommunityBot

11 silver badge

answered Jun 22, 2015 at 14:18

nanndoj

6,7907 gold badges33 silver badges43 bronze badges

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

2 Comments

Alex Over a year ago

One year later, this is exactly what I need. Let's hope it works :) Thanks

Chris Aelbrecht Over a year ago

terminal = true is crucial to get it working

skubski · Accepted Answer · 2015-06-22 12:57:51Z

0

The following array of items is an array of plain objects that have two fields: url and controller, both containing string values.

 $scope.items = [{
        url: 'page1.html',
        controller: 'Page1Controller'
    },... ]

What you really need is a reference to the function and that can be achieved with the $injector service.

Eventough this might work, I don't get why you aren't using the ParentController to alter the object in your array (or a directive).

answered Jun 22, 2015 at 12:57

skubski

1,6162 gold badges21 silver badges27 bronze badges

2 Comments

nanndoj Over a year ago

I'm not using ParentController because the the array of items and also the controller declaration, is dynamically created by my user.

skubski Over a year ago

Must have misinterpret your question. But you did state that this is the code you 'already' have. Nevertheless you're just binding a string instead of a controller function.

Collectives™ on Stack Overflow

Dynamic adding controller to ng-include

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related