2

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

我的页面控制器

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);
}
4

1 回答 1

4

事实证明，如果您使用隔离范围和controlelrAs语法，您还需要使用bindToController : true. 没有这个，您将无法仅使用vm并且必须$scope用于隔离范围变量

更多信息可以在John Papa 风格指南和这个 SO 答案中找到

最终的指令设置如下：

function GroupSelectionDirective() {
    return {
        scope: {
            group: '='
        },
        controller: GroupSelectionDirectiveController,
        controllerAs: 'vm',
        bindToController: true,
        templateUrl: '/views/templates/common/folderselection.html'
    };
}
于 2015-11-17T16:59:32.783 回答