AngularJS 在一个页面上重用相同的控制器，但配置不同答案

【问题标题】：AngularJS reusing the same controller on one page, with different configurationAngularJS 在一个页面上重用相同的控制器，但配置不同
【发布时间】：2013-05-31 09:45:51
【问题描述】：

我想在由同一控制器的不同实例控制的页面上显示两个元素，但是我需要注册一些唯一的外部信息（一个“操纵杆”获得了一个识别属性集，例如“玩家=一”，而另一个获得“玩家=二”）。我不确定最好的方法来准确地完成这个

这是我想要完成的一个通用示例：

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

或者……不这样做？

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

【问题讨论】：

标签： javascript angularjs angularjs-directive

【解决方案1】：

编辑

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

【讨论】：

或者自己创建一个指令
我想补充一点，$scope.player 属性不能立即用于控制器，但它可以在模板中使用。如果您在控制器内部console.log($scope.player)，除非在控制器初始化后大约 50 毫秒或更晚，否则您将得到未定义。

【解决方案2】：

将您的配置值存储在数据属性中，并使用$attrs. 在控制器中检索它（AngularJS ngInit documentation 建议说清楚ng-init，除非为 ngRepeat 的特殊属性设置别名。）类似的答案是here。这段代码 sn-p 给你一个大致的思路：

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>

Here is the full code in Plunker.

【讨论】：