AngularJS tái sử dụng bộ điều khiển tương tự trên một trang, với cấu hình khác nhau

Question

Tôi muốn hiển thị hai yếu tố trên một trang điều khiển bởi trường hợp khác nhau của bộ điều khiển cùng, nhưng tôi cần phải đăng ký một số thông tin bên ngoài mà sẽ là duy nhất (một "phím điều khiển" nhận được một bộ thuộc tính nhận dạng, như "người chơi = một" trong khi người kia nhận được "người chơi = hai"). Tôi không chắc cách nào tốt nhất để rút nó ra chính xác

Đây là một ví dụ chung những gì tôi đang cố gắng hoàn thành:

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

Tôi có nên:

Sử dụng chỉ thị?

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

Sử dụng $ injector? (FYI - điều này có thể là một thực hiện không chính xác)

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

Hoặc ... không làm được điều này?

Tôi nhận ra điều này cũng tương tự như nhau, dường như ngăn xếp không phân thắng bại bài:

Answer 1

Sửa

Kể từ ngController được khởi tạo trước khi ngInit, để có dữ liệu có sẵn trong bộ điều khiển cùng một lúc, bạn nên quấn ngController trong phần tử cha mẹ với ngInit:

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

Original câu trả lời

Tôi nghĩ đơn giản ng-init sẽ đủ:

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

Answer 2

Lưu trữ các giá trị cấu hình của bạn trong một thuộc tính dữ liệu, và lấy nó trong bộ điều khiển sử dụng $attrs. (The AngularJS ngInit documentation khuyến cáo phải nói rõ ràng về ng-init trừ răng cưa đặc biệt tính chất của ngRepeat.) Câu trả lời tương tự là here. Đoạn mã này sẽ cho bạn ý tưởng chung:

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> 

Bộ điều khiển:

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

Xem:

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

Here is the full code in Plunker.