【问题标题】:Passing the data from AngularJs Service to Controller and Controller to Controller将数据从 AngularJs 服务传递到控制器和控制器到控制器
【发布时间】:2017-09-10 15:07:30
【问题描述】:

目前我可以将 AngularJS 服务中的值传递给 Angular 控制器,但是现在我正在一个控制器中进行一些计算,现在我想将它传递给另一个控制器,你能帮帮我吗

  • 服务名称:detailService

  • 控制器 1:FromService

  • 控制器 2:BarCtrl

  • 在下面的代码中,我从 detailService 获取值 来自服务控制器
  • 在 FromService 控制器中,我正在评估 Array 的值 $scope.valuesSendToGraph

我想将此 $scope.valuesSendToGraph 发送到 BarCtrl 控制器,请您帮帮我,如何解决这个问题

AngularJS 代码

var app = angular.module('myApp', ["chart.js"]);
app.service('detailService', function($http, $filter, $q) {
  return {
    getInfo: function() {
      return $http({
        method: 'POST',
        url: 'myjson.json'
      }).then(function(response) {
        msoResponseArray = response.data;
        var passByCompanyArray = [];
        var failByCompanyArray = [];
        var wipByCompanyArray = [];
        var releasenameArray = [];
        var totalCountArray = [];
        var fullArray = [];

        msoResponseArray.forEach(function(item) {
          releasenameArray.push(item.executions[0].cycleName);
        });

        msoResponseArray.forEach(function(item) {
          /* Filtering the Items Which are Passed*/
          passByCompany = $filter('filter')(item.executions, function(
            inputs) {
            if ((inputs.executedBy == 'a' || inputs.executedBy == 'b' || inputs.executedBy == 'c' || inputs.executedBy == 'd') && inputs.executionStatus == '1') return inputs;

          });
          passByCompanyArray.push(passByCompany.length);
          //passByCompanyArray.unshift(item.executions[0].cycleName);
          failByCompany = $filter('filter')(item.executions, function(
            inputs) {
            if ((inputs.executedBy == 'a' || inputs.executedBy == 'b' || inputs.executedBy == 'c' || inputs.executedBy == 'd') && inputs.executionStatus == '2') return inputs;
          });
          failByCompanyArray.push(failByCompany.length);
          //failByCompanyArray.unshift(item.executions[0].cycleName);

          wipByCompany = $filter('filter')(item.executions, function(
            inputs) {
            if ((inputs.executedBy == 'a' || inputs.executedBy == 'b' || inputs.executedBy == 'c' || inputs.executedBy == 'd') && inputs.executionStatus == '3') return inputs;

          });
          wipByCompanyArray.push(wipByCompany.length);
          //wipByCompanyArray.unshift(item.executions[0].cycleName);

        });
        return $q.when([releasenameArray, passByCompanyArray, failByCompanyArray, wipByCompanyArray]);
      })
    }


  }
});
app.controller('FromService', function($scope, detailService) {
  detailService.getInfo().then(function(data) {
    $scope.newvalue = data;
    $scope.releasename = data[0];
    $scope.passCount = data[1];
    $scope.failCount = data[2];
    $scope.wipCount = data[3];

    function sumValue(arr) {
      var total = 0;
      arr.forEach(function(element) {
        total += element;
      })
      return total;
    }
    var sumPassCount = sumValue($scope.passCount);
    var sumFailCount = sumValue($scope.failCount);
    var sumWipCount = sumValue($scope.wipCount);
    $scope.valuesSendToGraph = [sumPassCount, sumFailCount, sumWipCount];
    console.log($scope.valuesSendToGraph);


    $scope.fullArray = $scope.releasename.map(function(item, i) {
      return {
        releasename: item,
        passCount: $scope.passCount[i],
        failCount: $scope.failCount[i],
        wipCount: $scope.wipCount[i]
      }
    });
    console.log($scope.fullArray);
  });
});
app.config(function(ChartJsProvider) {
  // Configure all charts
  ChartJsProvider.setOptions({
    colors: ['#803690', '#00ADF9', '#DCDCDC', '#46BFBD', '#FDB45C', '#949FB1', '#4D5360'],
    defaultFont: 'Ve'


  });
  // Configure all doughnut charts
  ChartJsProvider.setOptions('doughnut', {
    cutoutPercentage: 60
  });
  ChartJsProvider.setOptions('bubble', {
    tooltips: {
      enabled: false
    }
  });
});
app.controller('BarCtrl', function($scope) {
  $scope.labels = ['Passed', 'Failed', 'WIP'];
  $scope.series = ['Regression'];

  $scope.data = [
    $scope.valuesSendToGraph
  ];
});

【问题讨论】:

  • 两个控制器在DOM上是如何排列的?它们是在父元素和子元素上还是在兄弟元素上?
  • 他们在不同的DIV中

标签: javascript angularjs angular-services angular-controller


【解决方案1】:

我正在一个控制器中进行一些计算,现在我想将它传递给另一个控制器

我强烈建议您将所有计算转移到服务中。控制器负责将数据与视图绑定。

我想将此 $scope.valuesSendToGraph 发送到 BarCtrl 控制器

由于 Service 是单例的,您可以将 valuesSendToGraph 存储在服务中并从其他控制器加载它


如果您仍想将valuesSendToGraph 内容从控制器发送到控制器并且它们具有相同的级别,您可以在根级别使用$broadcast,例如:

$rootScope.$broadcast('values', $scope.valuesSendToGraph);

BarCtrl 通话中:

$scope.$on('values', function(event, data) {
  $scope.valuesSendToGraph = data;
});

确保您在拨打$rootScope.$broadcast之前拨打$scope.$on('values',

【讨论】:

  • 谢谢Maxim,我会尽量使用你说的最好的方法,我会尝试只在服务中使用逻辑。现在如果我想派生数组,我是否必须在服务中创建单独的函数
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2014-11-10
  • 1970-01-01
  • 1970-01-01
  • 2017-05-21
  • 1970-01-01
  • 2014-06-08
  • 1970-01-01
相关资源
最近更新 更多