Javascript AngularJS在一个页面上使用相同的控制器，配置不同

我想在由同一控制器的不同实例控制的页面上显示两个元素，但我需要注册一些唯一的外部信息（一个“操纵杆”获取标识属性集，如“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？（仅供参考-这可能是一个不正确的实现）

...
...
-----
.controller（'DualJoyCtrl'，函数（$injector，JoystickCtrl，$scope，$rootScope）{
$scope.joyOne=$injector.instantiate（JoystickCtrl，{$scope:$rootScope.$new（），播放器：“一”}）；
$scope.joyTwo=$injector.instantiate（JoystickCtrl，{$scope:$rootScope.$new（），播放器：“两个”}）；
});

或。。。不要这样做？

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

我意识到这类似于另一个看似不确定的堆栈帖子：

Edit

由于ngController是在ngInit之前初始化的，为了使控制器中的数据立即可用，您应该使用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>

。。。
...

将配置值存储在数据属性中，并使用

$attrs.

在控制器中检索配置值。（建议清除

ng init

，除非对ngRepeat的特殊属性进行别名处理。）类似的答案如下。此代码片段为您提供了大致思路：

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>

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

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

查看：

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

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

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

操纵杆：{{id}

---

或自己创建一个指令我想补充一点，$scope.player属性不能立即用于控制器，但可以在模板中使用。如果您从控制器中

console.log（$scope.player）

，您将无法定义，除非在控制器初始化后大约50毫秒或更晚。