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

如何将数据从一个控制器发送到angularjs中的另一个控制器

3 个答案: