在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在表達式中替換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";  
}

參見Plunk： http ：//plnkr.co/edit/GwnqK6？p = preview