AngularJS, вложенные контроллеры из переменной

Question

Как правило, я хочу инициализировать вложенный ng-controller внутри ng-repeat с использованием переменной.

JSFiddle

JS

angular.module('app',[]) 
.controller('main',function($scope){ 
    angular.extend($scope,{ 
     name:'Parent Controller', 
     items:[ 
      {name:'nested2'}, 
      {name:'nested1'} 
      ] 
    }); 
}) 
.controller('nested1',function($scope){ 
    $scope.name = "Name1"; 
}) 
.controller('nested2',function($scope){ 
    $scope.name = "Name2"; 
}); 

Я хочу это:

<div ng-controller="main" ng-app='app'> 
    Nested: {{name}} 
    <div ng-controller="nested1">{{name}}</div> 
    <div ng-controller="nested2">{{name}}</div> 
</div> 

стать чем-то вроде этого:

<div ng-controller="main"> 
    Nested: {{name}} 
    <div ng-repeat="item in items"> 
     <div ng-controller="item.name">{{name}}</div> 
    </div> 
</div> 

Проблема: это не работает. Ни то, ни другое не работает, что я пробовал после google'ing в течение часа или около того.

Есть ли какой-либо «законный» и хороший способ достичь этого?

Answer 1

Существует не реальный способ, используя угловые функции в этот момент, я полагаю. Вы можете создать директиву и использовать функцию неконтролируемого динамического контроллера controller:'@', name:'controllerName'. Но этот подход не будет оценивать привязки или выражения, которые предоставляют имя контроллера. То, что я могу придумать, - это взломать путем создания экземпляра контроллера и установки его в элемент.

Пример: -

.directive('dynController', function($controller){ 
    return { 
    scope:true, //create a child scope 
    link:function(scope, elm, attrs){ 
     var ctrl =scope.$eval(attrs.dynController); //Get the controller 
     ///Instantiate and set the scope 
     $controller(ctrl, {$scope:scope}) 

    //Or you could so this well 
    //elm.data('$ngControllerController', $controller(ctrl, {$scope:scope})); 
    } 
    } 
}); 

А на ваш взгляд: -

<div ng-controller="main"> 
    <div ng-repeat="item in items"> 
    Nested: 
      <div dyn-controller="item.name" ng-click="test()">{{name}}</div> 
    </div> 
    </div> 

Demo

Обратите внимание, что я изменил положение нг-контроллера от элемента, который делает ng-repeat, поскольку ng-repeat (1000) имеет более высокий приоритет, чем ng-контроллер (500), область ng-repeat будет преобладать, и вы в конечном итоге ничего не повторяете.

Хотя глядя на него

Answer 2

Инвестировала еще пару часов в него, проверяя источники угловатые-х и т.д.

Выражение, данные ng-controller, не оценивается вообще.

Вот лучший подход, который я нашел:

HTML:

<div ng-controller="main"> 
     Nested: {{name}} 
     <div ng-repeat="item in items"> 
      <div ng-controller="nested" ng-init="init(item)">{{name}}</div> 
     </div> 
    </div> 

JS:

angular.module('myApp', []) 
    .controller('main', function ($scope, $controller) { 
     angular.extend($scope, { 
      name: 'Parent Controller', 
      items: [ 
       {name: 'nested2'}, 
       {name: 'nested1'} 
      ] 
     }); 
    }) 
    .controller('nested', function ($scope, $controller) { 
     angular.extend($scope, { 
      init: function (item) { 
       $controller(item.name, {'$scope': $scope}); 
      } 
     }); 
    }) 
    .controller('nested1', function ($scope) { 
     $scope.name = 'test1'; 
    }) 
    .controller('nested2', function ($scope) { 
     $scope.name = 'test2'; 
    });