Использование контроллеров с директивой

Question

Я пытаюсь следовать руководству по стилю angularJS Джона Папы here и начал переключать свои директивы на использование controllerAs. Однако это не работает. Мой шаблон не может получить доступ к чему-либо, назначенному для vm. См. Этот простой пример plnkr, демонстрирующий поведение.

http://plnkr.co/edit/bVl1TcxlZLZ7oPCbk8sk?p=preview

angular 
    .module('app', []); 

angular 
    .module('app') 
    .directive('test', test); 

function test() { 
    return { 
     restrict: 'E', 
     template: '<button ng-click="click">{{text}}</button>', 
     controller: testCtrl, 
     controllerAs: 'vm' 
    } 
} 

angular 
    .module('app') 
    .controller('testCtrl', testCtrl); 

function testCtrl() { 
    var vm = this; 
    vm.text = "TEST"; 
} 

Answer 1

При использовании controllerAs синтаксиса вам не получить доступ к $ сферы, как обычно, переменная VM добавляется к объему, поэтому ваша кнопка должна стать:

<button ng-click="click">{{vm.text}}</button>

Обратите внимание, что vm. добавлено в начало text.

Here is a fork of your Plunk with the fix applied

---

Q: Вы знаете, как я бы доступ к атрибутам, передаваемые через как атрибуты для директивы, пример "сферы: {текст: '@'}"? Затем я вынужден использовать $ scope на контроллере и установить vm.text = $ scope.text?

A: В статье, которую вы ссылаетесь, есть a section y075, который говорит только о таком сценарии. Посмотрите в bindToController:

return { 
    restrict: 'E', 
    template: '<button ng-click="click">{{text}}</button>', 
    controller: testCtrl, 
    controllerAs: 'vm', 
    scope: { 
     text: '@' 
    }, 
    bindToController: true // because the scope is isolated 
}; 

Тогда вы должны быть в состоянии получить доступ vm.text

Answer 2

С «controllerAs», экземпляр контроллера псевдонимы - vm, в вашем случае - публикуются в рамках как .vm собственности объем.

Таким образом, для доступа к его свойствам (то есть к свойствам контроллера) необходимо указать {{vm.text}} или ng-click="vm.click".

Answer 3

При использовании controllerAs синтаксиса, то вы должны использовать

bindToController: true 

он будет работать в вашей директиве.

Answer 4

При использовании «controllerAs» синтаксиса, как указано выше, объем связан с контроллером на «этого» ссылка. Таким образом, это позволяет нам ввести новое пространство имен ('vm' здесь), связанное с нашим контроллером без необходимости добавлять свойства области в дополнительный литерал объекта (скажем $ scope). Так доступа ничего в рамках контроллера, требует 'ВМ пространство имен, как,

'<button ng-click="click">{{vm.text}}</button>'