Двухсторонняя привязка данных с директивой не работает

Question

У меня есть контроллер, используемый для добавления задач. На этой странице пользователю необходимо выбрать группу, для которой необходимо действовать. Я написал директиву, которая используется, чтобы позволить пользователю выбрать группы (папки)

Моя страница Контроллер

function AddTaskController($scope) { 
    var vm = this; 

    vm.group = { whatsit: true }; 

    $scope.$watch("vm.group", function() { 
     console.log("controller watch", vm.group); 
    },true); 
} 

страница HTML, где используется директива

<em-group-selection group="vm.group"></em-group-selection> 

Конфигурация директивы

function GroupSelectionDirective() { 
    return { 
     scope: { 
      group: '=' 
     }, 
     controller: GroupSelectionDirectiveController, 
     controllerAs: 'vm', 
     templateUrl: '/views/templates/common/folderselection.html' 
    }; 
} 

контроллер директивы:

function GroupSelectionDirectiveController($scope) { 
    var vm = this; 

    $scope.$watch("group", function() { console.log("yo1", vm.group); }, true) 
    $scope.$watch("vm.group", function() { console.log("yo2", vm.group); }, true) 
} 

Теперь, когда это срабатывает, оба console.log() звонят в указатель огня один раз, с undefined. Они больше не стреляют. Если в контроллере я установил vm.group на что-то еще, то $watch в AddTaskController никогда не будет уволен.

Почему нет привязки данных?

---

Update:

Я заметил, что если в директиве, изменить функцию init() в моей директиве использовать $scope это работает! Могу ли я, как предлагает Федакин, использовать controllerAs с двусторонней привязкой данных?

function init() { 
    $timeout(function() { 
     $scope.group.shizzy = 'timeout hit'; 
    }, 200); 
} 

Answer 1

Оказывается, что при использовании изолят областей и controlelrAs синтаксиса вам необходимо также использовать bindToController : true. Без этого вы не сможете использовать только vm и будете использовать $scope для изомированной переменной области видимости

Более подробной информации можно найти в John Papa style guide и this SO answer

В последней настройке директивы, как так:

function GroupSelectionDirective() { 
    return { 
     scope: { 
      group: '=' 
     }, 
     controller: GroupSelectionDirectiveController, 
     controllerAs: 'vm', 
     bindToController: true, 
     templateUrl: '/views/templates/common/folderselection.html' 
    }; 
}