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

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

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

你可以摆脱var vm = this;。