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

Reference directive attribute with vm rather than $scope

本文关键字：scope 引用 指令 属性 vm 使用      更新时间：2023-09-26

我有一个自定义指令，如下所示：

<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与控制器的其余部分保持一致？

指令配置对象上的 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}}

这里有一个指令的触发器，bindToController设置为 true，controllerAs设置为 vm 。

相关文章：