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

Я пытаюсь следовать руководству по стилю angelJA John Papa здесь и начал переключать мои директивы на использование 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";
}

Ответы

Ответ 1

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

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

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

Вот вилка вашего Plunk с исправленным применением

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

A: В статье вы ссылаетесь, есть раздел 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

Ответ 2

С помощью "controllerAs" в области видимости в качестве свойства .vm области видимости отображается псевдоним экземпляра контроллера - vm в вашем случае.

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

Ответ 3

Когда вы используете синтаксис controllerAs, вы должны использовать

bindToController: true

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

Ответ 4

При использовании синтаксиса "controllerAs", как указано выше, область действия привязана к справочнику 'this'. Таким образом, это позволяет нам ввести новое пространство имен ('vm' здесь), связанное с нашим контроллером, без необходимости добавлять свойства области в дополнительный литерал объекта (например, $scope). Таким образом, доступ к чему-либо в области контроллера требует пространства имен vm, as,

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