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="location.id"></bike-list>

这解决了我的问题！

输出：

这是来自位置列表：1

位置ID为：1

Answer 2

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

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

angular normalize attrs你可以在here

中阅读更多相关信息

工作示例可在here

中找到

AngularJS - 将值传递给组件

2 个答案: