javascript - 使用 vm 而不是 $scope 引用指令属性

Question

我有一个看起来像这样的自定义指令:

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

在我的指令定义对象中，我像这样引用我的 Controller 和作用域:

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

在我的 Controller 中，我设置了 var vm = this，这样我就可以将范围变量称为 vm.variable。然而，这不适用于 id 和 version。我发现我需要注入(inject) $scope 并将这些属性引用为 $scope.id 和 $scope.version。有没有一种方法可以设置它，这样我就可以避免注入(inject) $scope 并通过引用 vm.id 和 vm 与我的 Controller 的其余部分保持一致。版本?

Answer 1

指令配置对象上的 controllerAs 属性将用于引用 Controller 实例，因此如果您想在模板中使用 vm，则需要设置 controllerAs 属性到 vm。此外，通过将 bindToController 属性设置为 true，您可以直接绑定(bind)到 View 模型而不是 $scope:

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

使用您当前的指令配置，您的 controllerAs 引用将位于 myQueue 下，而不是 vm，这意味着您在 上创建的任何属性>vm(例如 vm.id)在您的 Controller 中将位于您模板中的 myQueue(例如 myQueue.id)。

通过添加 bindToController，我们不需要在指令的 Controller 中注入(inject) $scope:

function QueueController() {
    var vm = this;
}

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

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

有个笨蛋here将 bindToController 设置为 true，并将 controllerAs 设置为 vm。