如何设置第一个控制器数据另一个控制器答案

【问题标题】：How to set first controller data another controller如何设置第一个控制器数据另一个控制器
【发布时间】：2016-07-25 09:15:44
【问题描述】：

这里我添加了 categoryCtrl 和 ProductCtrl。此代码行 console.log(category); 工作正常。如何使用 for 循环或其他方法为产品控制器绑定此数据。

.controller('CategoryCtrl', function($scope, $http) {
    var vm = this;

    vm.playlists = {};

    $http.get("http://localhost/youtubewebservice/shop-categorylist-product.php").then(function(response) {
      vm.playlists = response.data.category;
      console.log(response.data.category);
    });


    $scope.selectedJsonObject=function(category){
        console.log(category);
    } 

})
.controller('productCtrl', function($scope, $stateParams)  {

});

【问题讨论】：

创建一个service，负责在角度组件之间共享数据。

标签： javascript jquery angularjs angularjs-scope

【解决方案1】：

您可以通过 Rootscope 或工厂或服务传递数据

JS 使用工厂

<!doctype html>
<html ng-app="project">
<head>
    <title>Angular: Service example</title>
    <script src="https://code.angularjs.org/angular-1.0.1.js"></script>
    <script>
var projectModule = angular.module('project',[]);
projectModule.factory('theService', function() {  
  var data ={}
  data.x ={}
    return data;
});
function FirstCtrl($scope, theService) {
  console.log(theService)

    $scope.name = "First Controller datas";
    theService.x =  $scope.name ;
}
function SecondCtrl($scope, theService) {   
    $scope.someThing = theService.x; 
}
    </script>
</head>
<body>  
    <div ng-controller="FirstCtrl">
        <h2>{{name}}</h2>
    </div>

    <div ng-controller="SecondCtrl">
        <h2> Second Controller recives {{someThing}}</h2>
    </div>
</body>
</html>

【讨论】：

如何在我的朋友项目中添加这些示例

【解决方案2】：

我修复了您的代码，使用服务应该是正确的解决方案。

.controller('CategoryCtrl', function($scope, myService) {
    var vm = this;
    vm.playlists = myService.playList;    
    $scope.selectedJsonObject=function(category){
        console.log(category);
    } 

})
.controller('productCtrl', function($scope, $stateParams, myService)  {
  this.playlists = myService.playList;
});

.service('myService', function($http){
    var playlist = {};
    $http.get("http://localhost/youtubewebservice/shop-categorylist-product.php").then(function(response) {
      playlist = response.data.category;
      console.log(response.data.category);
    });

   this.playList = function(){
     return playList;
   }

});

【讨论】：

Can't find variable: $http 将在我的朋友控制台中显示此错误
我必须将此服务文件单独添加或添加到我的朋友的同一控制器中
你必须在服务中注入 $http，我修复了代码。您可以将所有内容放在同一个文件或单独的文件中

【解决方案3】：

 $scope.selectedJsonObject=function(category){
    console.log(category);
$scope.$emit('eventName', { message: category});
}

在你的 productctrl 中使用

.controller('productCtrl', function($scope, $stateParams)  {
 $scope.$on('eventName', function (event, args) {


$scope.message = args.message;
 console.log($scope.message);});
});

【讨论】：

创建一个服务是更干净、可测试和可重用的解决方案，然后通过您的应用程序传播事件。
也许你是对的，但它更高效、更简单，而且这个 $on 和 $broadcast 也是可测试的。
.controller('PlaylistsCtrl', function($scope, $http) { var vm = this; vm.playlists = {};$http.get("localhost/youtubewebservice/… { vm.playlists = response.data.category;console.log(response.data.category); })$scope.selectedJsonObject=function(category{console.log(category);$scope.$broadcast('eventName', { message: category} ); }}) .controller('PlaylistCtrl', function($scope, $stateParams) {$scope.$on('eventName', function (event, args) {$scope.message = args.message;console.log ($scope.message); });});