簡體   English   中英

AngularJS-如何在ng-click()上將數據從一個控制器傳遞到另一個控制器?

[英]AngularJS- How to pass data from one controller to another on ng-click()?

因此,我試圖在一個單擊事件上在兩個控制器之間共享數據。 我的代碼如下:

調節器

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將用戶類型控制器的日期共享給另一個控制器,但這並不是理想的選擇。 我希望在我的類別控制器中可以訪問$ scope.array,以便可以在其視圖中顯示它。 什么是做到這一點的最佳方法。 非常感謝!

在這種情況下,您應該考慮使用服務在各個控制器之間共享數據。

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

這將立即為您提供結果,無需任何服務,也可以將$ 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>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM