与指令的两种方式数据绑定不起作用

Question

我有一个用于添加任务的控制器。在该页面上，用户需要 select 一个要执行的组。我写了一个指令，用于允许用户选择组（文件夹）

我的页面控制器

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 设置为其他值，则 AddTaskController 中的 $watch 永远不会被触发。

为什么数据绑定不起作用？

更新：

我注意到，如果在指令中，我将指令中的 init() 函数更改为使用 $scope，它就会起作用！我不能像 Fedaykin 所建议的那样，将 controllerAs 与双向数据绑定一起使用吗？

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

Answer 1

事实证明，如果您使用隔离作用域和 controlelrAs 语法，您还需要使用 bindToController : true。没有这个你将不能只使用 vm 并且必须使用 $scope 作为隔离范围变量

可以在 John Papa style guide and this SO answer

中找到更多信息

最终指令设置如下：

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

与指令的两种方式数据绑定不起作用

Two way data binding with directive doesn't work

data-binding

angularjs

angularjs-directive

isolate-scope