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;。

AngularJS: 在组件内部使用变量

AngularJS: Use variable inside component

angularjs

angularjs-components