AngularJS reusing the same controller on one page, with different configuration

Question

I want to display two elements on a page controlled by different instances of the same controller, but I need to register some external information that will be unique (one "joystick" gets an identifying property set, like "player = one" while the other gets "player = two").I'm not sure of the best way of pulling this off exactly

Here's a generic example of what I'm trying to accomplish:

<!-- These need to have different configurations -->
<div ng-include src="'joystick/joy.tpl.html'" 
     ng-controller="JoystickCtrl">...</div>

<div ng-include src="'joystick/joy.tpl.html'" 
     ng-controller="JoystickCtrl">...</div>

Should I:

Use a directive?

<div ng-include src="'joystick/joy.tpl.html'" 
     ng-controller="JoystickCtrl" player="one">...</div>
<div ng-include src="'joystick/joy.tpl.html'" 
     ng-controller="JoystickCtrl" player="two">...</div>

Use $injector? (fyi - this might be an incorrect implementation)

<div ng-controller="DualJoyCtrl">
    <div ng-include src="'joystick/joy.tpl.html'" 
         ng-controller="joyOne" player="one">...</div>
    <div ng-include src="'joystick/joy.tpl.html'" 
         ng-controller="joyTwo" player="two">...</div>
</div>

-----

.controller('DualJoyCtrl', function ($injector, JoystickCtrl, $scope, $rootScope) {
   $scope.joyOne = $injector.instantiate(JoystickCtrl, {$scope: $rootScope.$new(), player:"one"});
   $scope.joyTwo = $injector.instantiate(JoystickCtrl, {$scope: $rootScope.$new(), player:"two"});
});

Or... not do this?

I realize this is similar to another, seemingly inconclusive stack post:

package · Accepted Answer · 2013-06-06 05:17:36Z

7

Edit

Since ngController is initialized before ngInit, in order to have data available in controller at once, you should wrap ngController in parent element with ngInit:

<div ng-init="player = 'one'">
   <div ng-controller="JoystickCtrl">
     ...
   </div>
</div>

Original answer

I think simple ng-init would suffice:

<div ng-controller="JoystickCtrl" ng-init="player='one'">...</div>
<div ng-controller="JoystickCtrl" ng-init="player='two'">...</div>

edited Jun 6, 2013 at 5:17

answered Jun 4, 2013 at 20:57

package

4,8011 gold badge28 silver badges35 bronze badges

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

2 Comments

Kosmetika Over a year ago

or create a directive itself

methai Over a year ago

I'd like to add that the $scope.player property is NOT immediately available to the controller, but it is available in the template. If you console.log($scope.player) from within the controller you will get undefined unless it's about 50ms or later after controller initialization.

Community · Accepted Answer · 2017-05-23 12:02:37Z

3

Store your config values in a data attribute, and retrieve it within the controller using $attrs. (The AngularJS ngInit documentation recommends to say clear of ng-init unless aliasing special properties of ngRepeat. ) A similar answer is here. This code snippet gives you the general idea:

Index.html:

<div ng-include ng-controller="JoystickCtrl" src="'same.html'" data-id="1"></div>
<div ng-include ng-controller="JoystickCtrl" src="'same.html'" data-id="2"></div>

Controller:

function joystickCtrl($scope, $attrs) {
        $scope.id = $attrs.id;
    };

View:

<h2>Joystick: {{id}}</h2>

Here is the full code in Plunker.

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered Dec 8, 2014 at 19:02

James Lawruk

31.5k19 gold badges135 silver badges141 bronze badges

Collectives™ on Stack Overflow

AngularJS reusing the same controller on one page, with different configuration

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related