AngularJS - 将值传递给组件
Posted
技术标签:
【中文标题】AngularJS - 将值传递给组件【英文标题】：AngularJS - Pass Value to Component 【发布时间】：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 添加到自行车列表中？【问题讨论】：
【参考方案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以上是关于AngularJS - 将值传递给组件的主要内容，如果未能解决你的问题，请参考以下文章