javascript - AngularJS 在一个页面上重复使用相同的 Controller ，但配置不同

Question

我想在由同一 Controller 的不同实例控制的页面上显示两个元素，但是我需要注册一些唯一的外部信息(一个“joystick”获得一个标识属性集，例如“player = one”，而另一个获得“player = two”)。我不确定最好的方法来实现这一点

这是我正在尝试完成的通用示例:

<!-- 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>

我应该:

使用指令？

<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>

使用 $injector？(仅供引用 - 这可能是一个不正确的实现)

<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"});
});

或者...不这样做？

我意识到这与另一个看似不确定的堆栈帖子相似:

Answer 1

编辑

由于 ngController 在 ngInit 之前初始化，为了让 Controller 中的数据立即可用，您应该使用 ngInit 将 ngController 包装在父元素中:

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

原始答案

我认为简单的 ng-init 就足够了:

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