Общая область применения директивы, когда используется синтаксис "контроллер как"

Question

Вот простой пример использования директив (адаптировано из официального руководства) - JSFiddle

<div ng-controller="Controller">
  <my-customer></my-customer>
</div>


angular.module('my-module', [])
.controller('Controller', function($scope) {
     $scope.vojta = { name: 'Vojta', address: '3456 Somewhere Else' };
 })
.directive('myCustomer', function() {
     return {
        restrict: 'E',
        template: 'Name: {{vojta.name}} Address: {{vojta.address}}'
     }
 });

Указанная выше директива имеет ту же область действия, что и ее родительский контроллер. Как я могу сделать то же самое с контроллером в качестве синтаксиса?

Это возможно сделать с изолированными областями, но я ищу решение, в котором вы не создадите отдельную область действия для директивы. Это просто возможно?

Я попробовал все из controllerAs, bindToController и потребовал: '^ngController' без какого-либо успеха.

Answer 1

Для controllerAs Синтаксис, в вашем контроллере создать объект ViewModel, имеющий ссылку на this следующее:

var vm = this;
vm.vojta = { name: 'Vojta', address: '3456 Somewhere Else' }; //your object

И в шаблоне вы должны использовать as дать псевдоним вашему контроллеру следующим образом:

<div ng-controller="Controller as ctrl"> //now inside this scope use 'ctrl' which acts as the 'scope' of the controller.
  <my-customer></my-customer>
</div>

В вашей директиве:

template: 'Name: {{ctrl.vojta.name}} Address: {{ctrl.vojta.address}}' //notice the use of 'ctrl'

Рабочая скрипка здесь.