如何在AngularJS中的控制器之间动态更改数据答案

【问题标题】：How to dynamically change data between controllers in AngularJS如何在AngularJS中的控制器之间动态更改数据
【发布时间】：2014-12-11 21:01:08
【问题描述】：

我的脚本上有一个工厂，它返回一个空数组。我希望能够从两个不同的控制器访问这个数组并修改它的数据，比如插入一个对象或一个字符串。

'use strict';

var app = angular.module('invoiceApp');

app.factory('InvoiceFactory',[function() {
return {
  invoices: []
};

}]);

app.controller('MainCtrl',['$scope','InvoiceFactory', function ($scope, $http, socket, InvoiceFactory) {
 $scope.applyUnpaidFilter = function() {
    //filter invoices by unpaid
 }

 $scope.applyAllFilter = function() {
    //filter invoices by all
 }

}])
 .controller('InsertInvoiceController', function($scope, $modal) {
var modalInstance;

$scope.insertInvoice = function() {
  modalInstance = $modal.open({
    templateUrl: 'modals/InsertInvoice.html',
    controller: 'InvoiceModalController'
  });
};
 })
 .controller('InvoiceModalController',
          ['$scope','$modalInstance','InvoiceFactory', function($scope, $modalInstance, InvoiceFactory) {

$scope.ok = function() {
  InvoiceFactory.invoices = $scope.loadInvoices();
  $modalInstance.close('closing dialog');

};
$scope.cancel = function() {
  $modalInstance.dismiss('cancel');
};

$scope.loadInvoices = function() {
  var xlf = document.getElementById('xlf');
  handleSpreadsheet(xlf);
  var results = [];

  function handleSpreadsheet(e) {
    var files = e.files;
    var i, f;
    for(i = 0, f=files[i]; i != files.length; i++) {
      var reader = new FileReader();
      reader.onload = function(e) {
        var data = e.target.result;
        var wb;
        wb = XLSX.read(data, {type:'binary'});
        to_json(wb);
      };

      reader.readAsArrayBuffer(f);
    }
  }

  function to_json(workbook) {
    var result = {};
    workbook.SheetNames.forEach(function(sheetName) {
      var roa = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
      if(roa.length > 0) {
        result = roa;
      }
    });
    results = result;
  }

  function fixdata(data) {
    var o="", l=0, w=10240;
    for(; l<data.byteLength/w; ++l)
      o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l*w, l*w+w)));

    o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l*w)));
    return o;
  }
  return results;
}

 }])
 .controller('InvoiceDisplayController',['$scope', 'InvoiceFactory', function($scope, InvoiceFactory) {
  $scope.invoices = InvoiceFactory.invoices;
  console.log($scope.invoices.length);
 }]);

对不起，代码很乱。

【问题讨论】：

那么问题是什么，因为看起来你已经这样做了？
感谢您的回复，我的代码似乎不起作用，数据根本没有改变，只是保持空白。我是 AngularJS 的新手。

标签： javascript angularjs dynamic controller factory

【解决方案1】：

首先让我说您对MainCtrl 控制器的声明不正确

app.controller('MainCtrl',['$scope','InvoiceFactory', function ($scope, $http, socket, InvoiceFactory) {

应该是

app.controller('MainCtrl',['$scope','$http', 'socket', 'InvoiceFactory', function ($scope, $http, socket, InvoiceFactory) {

否则变量 $http 将存储 InvoiceFactory 单例。

在您注入 InvoiceFactory 的任何地方，您都可以像这样更改其发票

InvoiceFactory.invoices.push("Hello World");
InvoiceFactory.invoices.push("Goodbye Cruel World");
InvoiceFactory.invoices.splice(0, 1);

或者你可以改变作用域变量

$scope.invoices = InvoiceFactory.invoices;

$scope.invoices.push("Hello World");
$scope.invoices.push("Goodbye Cruel World");
$scope.invoices.splice(0, 1);

请记住，您实际上不是在这里创建工厂，而是创建服务。请注意，angular.factory == angular.service 的计算结果为 true。所以你可以用服务代替你对工厂的调用，它的工作方式完全相同，但更具可读性。

这是一个演示这个的简单文件

http://jsfiddle.net/m3grjo9t/

【讨论】：