AngularJS

Question

我正在尝试将值从一个组件传递到另一个组件。

位置列表

<div uib-accordion-group class="panel-default" heading="{{location.name}}" ng-repeat="location in $ctrl.locations">
  <p>This is from location list: {{location.id}}</p>
  <bike-list locationId="{{location.id}}"></bike-list>
</div>

输出：

这是来自位置列表：1

位置 ID 是：

自行车清单

自行车-list.component.js

angular
.module('bikeList')
.component('bikeList', {
    templateUrl: 'bike-list/bike-list.template.html',
    controller: ['$rootScope', function ($rootScope) {
        var self = this;
        self.bikes = $rootScope.currentBikes;

    }],
    bindings: {
        locationId: '<'
    }
});

自行车-list.template.html

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>Location id is : {{$ctrl.locationId}}</p>
</body>

输出：

位置 ID 是：

问题

如何将 locationId 获取到自行车列表？

Answer 1

而是 <bike-list locationId="{{location.id}}"></bike-list> 将其更改为

<bike-list location-id="$ctrl.location.id"></bike-list>

angular 标准化属性，您可以在 here

中阅读更多相关信息

可以在 here

中找到工作示例

Answer 2

我把<bike-list locationId="{{location.id}}"></bike-list>改成了

<bike-list location-id="location.id"></bike-list>

解决了我的问题！

输出：

这是来自位置列表：1

位置 ID 是：1

AngularJS - 将值传递给组件

AngularJS - Pass Value to Component

html

data-binding

angular-components