Angularjs: динамически создаваемые контроллеры удваиваются

Question

Я пытаюсь динамически создавать childControllers внутри masterController. Я получил идею от this page. См. Это JSFiddle и смотрите консоль.

+ создает новый childController. Каждый childController имеет случайное число, созданное в его функции контроллера, и номер, установленный ng-init.

Когда я делаю следующее:

click the + 
click Emit 
click BroadCast 

выход консоли:

new masterController 

creating new childController.. 
new childController (undefined : 37818) 
created the new childController 
new childController (undefined : 49443) 

child (0 : 49443) emitting.. 
masterController heard (0:49443) 

broadcasting.. 
(undefined : 37818) received the broadcast 
(0 : 49443) received the broadcast 
done broadcasting 

Здесь становится ясно, что два childControllers генерируются, а не только один. Если удалить HTML-строка 16

ng-controller="childController" 

тогда только один контроллер создан, поэтому я предполагаю, что проблема заключается в том, что эта линия создает еще один контроллер. Как мне обойти это, и правильно ли я создаю контроллеры динамически?

Answer 1

Вы правы в своем предположении, что ng-контроллер создает другой контроллер. Чтобы обойти это, вы можете передать ему конструктор контроллера, а не создавать его самостоятельно.

Работа скрипка: https://jsfiddle.net/acw9q0ya/

В createNewChildController:

var ControllerFn = function() { 
     return $controller('childController', { $scope: $scope.$new() }).constructor; 
    }; 
    $scope.childControllers.push(ControllerFn) 

Наконец в нг-повторе, имя передается потребности соответствовать тому, что было принято в $controller.

<div ... 
    ng-repeat="childController in childControllers" 
    ng-controller="childController" 
    ... 
> 

Answer 2

ng-repeat создает сам контроллер. Вам не нужно создавать контроллер. Заменить код с этим:

$scope.createNewChildController = function(){ 
     console.log("\ncreating new childController..") 
     //var Controller = $controller('childController', { $scope: $scope.$new() }); 
     $scope.childControllers.push({}) 
     console.log("created the new childController") 
    } 

Если вы хотите использовать динамический контроллер, как пример вы хотите, иметь в виду, что вы будете иметь переменную для каждого элемента массива:

$scope.SubController_1 = function() { 
    return $controller('ControllerName', { $scope: $scope.$new() }).constructor; 
};