带有vm而不是$ scope的reference指令属性

Question

我有一个自定义指令,如下所示:

<my-queue id="report.id" version="report.version"></my-queue>

在我的指令定义对象中,我引用我的控制器和范围,如下所示:

controller: 'QueueController',
controllerAs: 'myQueue',
scope: {
  id: '=',
  version: '='
}

在我的控制器中,我设置为var vm = this可以将范围变量称为vm.variable.然而,这不适用于id和version.我发现我需要注入$scope并引用这些属性作为$scope.id和$scope.version.有没有一种方法来设置这让我能避免注射$scope并参照留在我的控制器的其余部分保持一致vm.id和vm.version？

Answer 1

指令配置对象上的controllerAs属性将用于引用控制器实例，因此如果您想vm在模板中使用，则需要将该controllerAs属性设置为vm. 此外，通过将bindToController属性设置为，true您可以直接绑定到视图模型而不是 $scope：

function myQueue() {
    return {
        restrict: 'E',
        template: ... ,
        controller: myQueueCtrl,
        controllerAs: 'vm',
        scope: {
            id: '=',
            version: '='
        },
        bindToController: true
    }
}

使用当前的指令配置，您的controllerAs引用将位于myQueue，而不是，这意味着您在控制器（例如）vm上创建的任何属性都将在您的模板中（例如）。vmvm.idmyQueuemyQueue.id

通过添加，bindToController我们不需要在指令的控制器中注入 $scope：

function QueueController() {
    var vm = this;
}

然后您可以将指令模板中的变量引用为

{{vm.id}}
{{vm.version}}

这里有一个将您的指令bindToController设置为 true 并controllerAs设置为 的plunker vm。