AngularJSカスタム指示 - bindToControllerエラー

Question

エラーが表示されるのはなぜですか：$ ctrlは定義されていません以下のカスタムディレクティブからですか？私は指令の中のコントローラに$ ctrlを定義しました。

var myapp = angular.module('plunker', []); 
myapp.directive('userinfo', function() { 
    return{ 
     restrict:'E', 
     template: 'User : <b>{{$ctrl.user.firstName}}</b> <b>{{$ctrl.user.lastName}}</b>', 
     scope:{ 
     user: '=' 
     }, 
     bindToController:true, 
     controller:function(){ 
     var $ctrl = this; 

     }, 

     controllerAs:$ctrl 
    } 
    return directive; 
}); 
myapp.controller("MyController", function() { 
    var $ctrl = this; 
    $ctrl.jakob = {}; 
    $ctrl.jakob.firstName = "Jakob"; 
    $ctrl.jakob.lastName = "Jenkov"; 

    $ctrl.john = {}; 
    $ctrl.john.firstName = "John"; 
    $ctrl.john.lastName = "Doe"; 
}); 

Answer 1

controllerAsはstringである必要がありますが、定義されていないグローバル変数$ ctrlを渡しています。これを試してみてください：

controllerAs: '$ctrl' 

From the docs：

If it is necessary to reference the controller or any functions bound to the controller from the template, you can use the option controllerAs to specify the name of the controller as an alias.