[英]How to send data from one controller to another controller in angularjs
下面是来自播放列表控制器的播放列表json数据。
{
"id":18,
"file":{"url":"/uploads/playlist/file/18/01_-_MashAllah.mp3"},
"event_id":23,"created_at":"2015-11-11T10:33:52.000Z",
"updated_at":"2015-11-11T10:33:52.000Z",
"name":"01 - MashAllah.mp3"
},
{
"id":19,
"file":{"url":"/uploads/playlist/file/19/02_-_Laapata.mp3"},
"event_id":19,"created_at":"2015-11-11T10:50:01.000Z",
"updated_at":"2015-11-11T10:50:01.000Z",
"name":"02 - Laapata.mp3"
}
现在我想将id和name绑定到playerController我做这样的事情
<div ng-controller="playlistsController">
<div ng-repeat="playlist in playlists">
<div ng-controller='PlayerController'>
<input type=hidden ng-model="ID" ng-init="ID=playlist.id">
<input type=hidden ng-model="Name" ng-init="Name=playlist.name">
</div>
</div>
</div>
并在控制器中
.controller('PlayerController',['$scope',function($scope) {
console.log($scope.ID);
console.log($scope.name);
}]);
但控制台显示未定义。
我不知道我哪里出错了,因为我是棱角分明的新手。
方法1:
在控制器之间共享数据的最佳方法是使用服务 。 使用getter和setter声明一个服务,并注入两个控制器,如下所示:
服务:
app.service('shareData', function() {
return {
setData : setData,
getData : getData,
shared_data : {}
}
function setData(data) {
this.shared_data = data
}
function getData() {
return this.shared_data
}
})
在定义了服务之后,现在注入两个控制器并使用父控制器(在您的情况下)来设置数据,如下所示:
app.controller('playlistsController', function(shareData) {
//your data retrieval code here
shareData.setData(data);
})
最后在您的子控制器中,获取数据:
app.controller('PlayerController', function(shareData) {
$scope.data = shareData.getData();
})
方法2:
因为,您必须将数据从父控制器传递到子控制器,您可以使用$broadcast
,如下所示:
父控制器:
//retrieve data
$scope.$broadcast('setData', data);
并在子控制器中接收数据:
$scope.$on('setData', function(event, args) {
$scope.data = args;
})
执行第一个控制器代码,然后角度开始继续执行此控制器所附加的html。 所以只需将变量初始化移动到控制器:
$scope.Name = $scope.playlist.name;
$scope.ID = $scope.playlist.id;
或者只是使用原始变量(如果你不需要它们的副本)
<input type=hidden ng-model="ID=playlist.id">
<input type=hidden ng-model="Name=playlist.name">
或者您可以保留原样 - 无论您在日志中看不到值,它都可以工作。
你应该使用$parent
:
HTML:
<div ng-controller="playlistsController">
<div ng-repeat="playlist in playlists">
<div ng-controller='PlayerController'>
<input type="text" ng-model="$parent.playlist.id">
<input type="text" ng-model="$parent.playlist.name">
</div>
</div>
</div>
JS:
app.controller('PlayerController', function ($scope, $sce) {
console.log($scope.$parent.playlists);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.