如何將一個transcluded模板綁定到不同的控制器？

Question

我想通過一個指令傳遞給動態控制器（從指令的角度來看，在運行時）模板。

事情是這樣的：

<my-dir ctrl="PersonCtrl"> 
    <h1>{{person.name}} - {{person.age}}</h1> 
</my-dir> 

var data = { 
    name: "Alex", 
    age: "24" 
}; 

function PersonCtrl($scope){ 
    $scope.person = data;   
} 

myApp.directive('myDir', function($controller){ 
    return { 
     restrict: "EA", 
     scope: { 
      ctrl: "@" 
     }, 
     transclude: true, 
     controller: function($scope, $element, $attrs) { 

     }, 
     template: "<div>{{ctrl}}</div><div ng-transclude></div>", 
     link: function($scope, $element, $attrs) { 
      $controller($attrs.foo, {$scope: {}}); 
     } 
    }; 
}); 

see jsFiddle

控制器是發現和實例化，但transcluded模板，這是行不通的莫名其妙的結合。我是否錯過了某些訂單要求，或者有沒有辦法將此控制器範圍綁定到transcluded模板？

Answer 1

發現它 - 應該將控制器綁定到$$ nextSibling範圍！

$controller($attrs.ctrl, {$scope: $scope.$$nextSibling}); 

updated jsFiddle