AngularJS - 将值传递给组件答案

【问题标题】：AngularJS - Pass Value to ComponentAngularJS - 将值传递给组件
【发布时间】：2017-08-20 21:19:21
【问题描述】：

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

位置列表

<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 是：

自行车清单

bike-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: '<'
    }
});

bike-list.template.html

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

输出：

位置 ID 是：

问题

如何将 locationId 添加到自行车列表中？

【问题讨论】：

标签： html angularjs data-binding angular-components

【解决方案1】：

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

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

这解决了我的问题！

输出：

这是来自位置列表：1

位置 ID 为：1

【讨论】：

【解决方案2】：

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

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

angular normalize attrs，你可以在here阅读更多关于它的信息

工作示例可以在here中找到

【讨论】：

这会导致错误。现在的输出是：This is from location list: 1 Location id is : {{$ctrl.locationId}}