javascript - 如何在 AngularJS 中动态更改 Controller 之间的数据

Question

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

'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);
 }]);

抱歉，代码很乱。

Answer 1

首先我要说的是，您对 MainCtrl Controller 的声明不正确

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

应该是

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

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

在任何注入(inject) 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。因此，您可以用服务替换对工厂的调用，它的工作方式完全相同，但更具可读性。

这是一个简单的 fiddle 演示这一点

http://jsfiddle.net/m3grjo9t/