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，这意味着您在vm上创建的任何属性（例如vm.id您的控制器中的} {}将位于模板中myQueue（例如myQueue.id）。

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

function QueueController() {
    var vm = this;
}

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

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

您的指令有一个here，bindToController设置为true，controllerAs设置为vm。

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

1 个答案: