在AngularJS中的指令中使用控制器名稱（ng-controller）的表達式

Question

而不是使用ng-controller指定控制器名稱我想通過指令中的屬性指定控制器名稱，然後將其替換爲模板（我想要執行此操作這個奇怪的方式只是爲了探索AngularJS）。

這裏是鏈接到普拉克： http://plnkr.co/edit/KZgLQ6?p=preview

例如什麼我試圖做

<sample-drtv ctrl-name="drtvCtrl"></sample-drtv> 

模板（sampleDrtv.html）：

<div ng-controller="{{ctrlName}}"> 
    <p>{{ptagcontent}}</p> 
</div> 

指令代碼：

var myModule = angular.module('ng'); 

myModule.directive('sampleDrtv',[function(){ 
    return { 
     restrict: "E", 
      replace: true, 
      templateUrl: "sampleDrtv.html", 
      scope: {}, 
      controller: function($scope,$element,$attrs){ 
       $scope.ctrlName = $attrs.ctrlName; 
       console.log($scope); 
      } 
     }; 

}]); 

function drtvCtrl($scope){ 
    $scope.ptagcontent = "AngularJS Rocks"; 
} 

我得到我的控制檯上的錯誤：

Error: Argument '{{ctrlName}}' is not a function, got undefined 

關於我應該怎麼做的任何想法ctrlName被替換爲表達式？我相信我完全不理解指令的概念，所以我犯了一個錯誤？

Answer 1

我會推薦這樣的結構：

<sample-drtv></sample-drtv> 

模板（sampleDrtv.html）：

<div ng-controller="drtvCtrl"> 
    <p>{{ptagcontent}}</p> 
</div> 

AngularJS部分：

var myModule = angular.module('ng'); 

myModule.directive('sampleDrtv',[function(){ 
    return { 
    restrict: "E", 
    replace: true, 
    templateUrl: "sampleDrtv.html" 
    }; 
}]); 

function drtvCtrl($scope){ 
    $scope.ptagcontent = "AngularJS Rocks"; 
} 

見普拉克：http://plnkr.co/edit/GwnqK6?p=preview