如何將數據從一個控制器發送到angularjs中的另一個控制器

Question

下面是來自播放列表控制器的播放列表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);


}]);

但控制台顯示未定義。

我不知道我哪里出錯了，因為我是棱角分明的新手。

Answer 1

方法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; 
})

Answer 2

執行第一個控制器代碼，然后角度開始繼續執行此控制器所附加的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">

或者您可以保留原樣 - 無論您在日志中看不到值，它都可以工作。

Answer 3

你應該使用$parent ：

的jsfiddle

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);
});