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永远不会被解雇。

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

更新

我注意到，如果在指令中我更改了我的指令中的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和this SO answer

中找到更多信息

最终的指令设置如下：

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

使用指令的双向数据绑定不起作用

1 个答案: