AngularJS-如何在ng-click()上将数据从一个控制器传递到另一个控制器?

时间:2017-07-20 18:16:26

标签: angularjs angularjs-scope

所以我试图在点击事件上的两个控制器之间共享数据。我的代码如下:

控制器

function userTypeController($scope, $location, CategoryService) {
  let vm=this;

vm.getCat=function(){

    CategoryService.getCategories() .then(function (response) 
        {
          $scope.categories=response.data.data.categories;
          $scope.index = 0;
          $scope.array = [];
          for(var i=0; i<$scope.categories.length/2;i++)
          $scope.array.push(i);


                                       });
    $location.path('/category');
};
  };

在我的html中说该控制器,我有一个调用getCat函数的按钮。

 <md-button md-whiteframe="8"  ng-click="utCtrl.getCat()">Submit<md-button>

在我的类别服务中,我有一个返回类别列表的函数。

服务

return {
            getCategories: function () {
                return $http.get(url2);
            }

现在我希望从服务器获取的类别数组可以在我的Categories控制器中访问。之前我使用$ rootScope来分享从usertype控制器到另一个的日期,但这不是理想的事情。我想在我的类别控制器中访问$ scope.array,以便我可以在其视图中显示它。什么是最好的方法来做到这一点。非常感谢!

2 个答案:

答案 0 :(得分:3)

在这种情况下,您应该考虑使用服务来跨控制器共享数据。

<强> SharedService.js

app.service('sharedService', function(){
  var categories = [];  
  names.add = function(incategories){
    categories = incategories;
  };
  names.get = function(){
    return categories;
  };     
});

然后注入您的controller1和controller2并根据您的要求使用。

 app.controller("TestCtrl", 
   function($scope,sharedService) {
    $scope.categories =[];
    $scope.save= function(){
      sharedService.add(yourcat);
    }   
   }
  );

然后将其用作,

 app.controller("TestCtrl2", 
   function($scope,sharedService) {      
   $scope.getcategories = function(){
     $scope.categories = sharedService.get();
   }
  }
 );

答案 1 :(得分:1)

这将立即为您提供结果,无需任何服务或任何东西,您也可以为多个控制器使用$ broadcast:

<div ng-app="myApp" ng-controller="myCtrl"> 

    <button ng-click="sendData();"></button>

</div>


<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($rootScope, $http) {
        function sendData() {
            var arrayData = [1,2,3];
            $rootScope.$emit('eventName', arrayData);
        }
    });
    app.controller('yourCtrl', function($rootScope, $http) {
        $scope.$on('eventName', function(event, data) {
            console.log(data); 
        }); 
    });
</script>