如何在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>

但控制台显示未定义

---

我不知道我哪里出了问题，因为我是新来的。

方法1:

app.service('shareData', function() {
    return {
        setData : setData,
        getData : getData,
        shared_data : {} 
    }

    function setData(data) {
        this.shared_data = data
    }

    function getData() {
        return this.shared_data
    } 
})

//retrieve data
$scope.$broadcast('setData', data);

在控制器之间共享数据的最佳方式是使用服务。使用getter和setter声明服务，并按如下方式注入两个控制器：

app.controller('playlistsController', function(shareData) {
    //your data retrieval code here
    shareData.setData(data);
})

服务：

app.service('shareData', function() {
    return {
        setData : setData,
        getData : getData,
        shared_data : {} 
    }

    function setData(data) {
        this.shared_data = data
    }

    function getData() {
        return this.shared_data
    } 
})

//retrieve data
$scope.$broadcast('setData', data);

定义服务后，现在将注入两个控制器，并使用父控制器（在您的情况下）按如下方式设置数据：

app.controller('playlistsController', function(shareData) {
    //your data retrieval code here
    shareData.setData(data);
})

最后，在您的子控制器中，获取以下数据：

app.controller('PlayerController', function(shareData) {
    $scope.data = shareData.getData();
})

方法2:

app.service('shareData', function() {
    return {
        setData : setData,
        getData : getData,
        shared_data : {} 
    }

    function setData(data) {
        this.shared_data = data
    }

    function getData() {
        return this.shared_data
    } 
})

//retrieve data
$scope.$broadcast('setData', data);

由于您必须将数据从父控制器传输到子控制器，因此您可以按如下方式使用

$broadcast

：

app.controller('playlistsController', function(shareData) {
    //your data retrieval code here
    shareData.setData(data);
})

父控制器：

app.service('shareData', function() {
    return {
        setData : setData,
        getData : getData,
        shared_data : {} 
    }

    function setData(data) {
        this.shared_data = data
    }

    function getData() {
        return this.shared_data
    } 
})

//retrieve data
$scope.$broadcast('setData', data);

并在子控制器中接收数据：

$scope.$on('setData', function(event, args) {
    $scope.data = args; 
})

$scope.Name = $scope.playlist.name;
$scope.ID = $scope.playlist.id;

---

您应该使用

$parent

：

HTML:

---

首先执行控制器代码，然后启动该控制器所连接的html。因此，只需将变量初始化移动到控制器：

$scope.$on('setData', function(event, args) {
    $scope.data = args; 
})

$scope.Name = $scope.playlist.name;
$scope.ID = $scope.playlist.id;

或者只使用原始变量（如果不需要它们的副本）

---

或者您可以保持原样—不管您在日志中没有看到值，它都可以正常工作。

$parent在此不做任何操作。您可以添加或删除它-代码将以同样的方式工作。