Доступ к контроллеру из функции компиляции в директивах

Question

Я искал все, и единственное, что я могу придумать, это то, что я не понимаю ничего принципиального в том, как работает функция компиляции.

Вот что у меня есть

angular.module("app", []) 
.directive("foo", function(){ 
    return { 
    scope: {}, 
    controller: function() { 
     this.someValue = 23; 
    }, 
    contollerAs: "ctrl", 
    compile: function(tElem, tAttrs) { 
     tElem.html("<h1>Data: {{ctrl.someValue}}</h1>"); 
    }, 
    template: '<h1>test</h1>' 
    } 
}); 

Здесь отображается: данные: и не похоже, чтобы увидеть "SomeValue" переменной. Однако, когда я использую scope вместо синтаксиса controllerAs, он работает.

//this works fine 
angular.module("app", []) 
.directive("foo", function(){ 
    return { 
    scope: {}, 
    controller: function($scope) { 
     $scope.someValue = 23; 
    }, 
    contollerAs: "ctrl", 
    compile: function(tElem, tAttrs) { 
     tElem.html("<h1>Data: {{someValue}}</h1>"); 
    }, 
    template: '<h1>test</h1>' 
    } 
}); 

Это показывает: данные: 23

Есть ли что-то я здесь отсутствует? Я даже правильно использую компиляцию? Руководство кажется менее полезным.

Answer 1

Потому что есть опечатка. Это controllerAs, а не contollerAs.

Рекомендуется использовать template function вместо compile. Это упростит модернизацию компонентов в будущем, а также избавит от проблем - compile в приведенной выше директиве не будет работать правильно, если нет шаблона <h1>test</h1>.