AngularJS：在组件内部使用变量

Question

我想使用输入变量并将其显示在组件HTML中，但无法正常工作。

我很确定我在这里错过了一些重要的事情，但是不能说什么。

这是我的组件声明：

app.component('requestSummary', {
    templateUrl: "./Template/request-summary",
    controller: function RequestSummary() {
        var vm = this;
    },
    bindings: {
        request: "="
    }
});

组件模板：

<div>
    <h1>{{ vm.request.Pnr }}</h1>
</div>

（我也尝试过不使用vm）

组件使用：

<md-card ng-repeat="request in vm.requests">
    <md-card-content>
        <request-summary request="request"></request-summary>
    </md-card-content>
</md-card>

当我在组件控制器中执行console.log(vm)时，可以看到我的请求在那里：

但是我不知道如何在HTML中打印它。

感谢您的帮助。

Answer 1

组件具有一个自动的默认controllerAs控制器，别名为$ ctrl。您需要使用：

<div>
    <h1>{{ $ctrl.request.Pnr }}</h1>
</div>

您可以摆脱var vm = this;。