使用 AngularJS 在控制器之间传递变量

Passing variables between controllers using AngularJS

本文关键字：变量 之间 控制器 AngularJS 使用      更新时间：2023-09-26

>我有两个控制器：控制器 1 和控制器 2

在控制器 1 的$scope中，我已经设置了我需要的所有值。使用 $scope 中的数据，我尝试运行某些函数并将返回值传递给 Controller2。

我正在考虑创建一个工厂来将变量从控制器 1 传递到控制器 2。但是，我意识到我需要的所有输入值都存在于控制器 1 中。我想知道工厂是否可以在控制器 1 中运行时保留数据，并在控制器 2 中再次运行时返回该数据。

谢谢

工厂是一个单例，因此可用于在不同的控制器或指令之间共享数据。看看这里的小提琴手。我创建了一个工厂"sharedContext"，可用于使用不同$scope在控制器之间共享任何键值对。

厂 

myApp.factory("sharedContext", function() {
  var context = [];
  var addData = function(key, value) {
    var data = {
      key: key,
      value: value
    };
    context.push(data);
  }
  var getData = function(key) {
    var data = _.find(context, {
      key: key
    });
    return data;
  }
  return {
    addData: addData,
    getData: getData
  }
});

从需要共享对象的控制器可以调用工厂的"addData"方法将数据存储在一个键下。其他有兴趣访问共享数据的控制器/指令可以通过调用"getData"方法并传递正确的密钥来实现。

控制器（共享数据）

function MyCtrl_1($scope, sharedContext) {
  $scope.input_1 = 5;
  $scope.input_2 = 15;
  $scope.add = function() {
    $scope.result = $scope.input_1 + $scope.input_2;
    sharedContext.addData("Result", $scope.result)
  }
}

控制器（访问共享数据）

function MyCtrl_2($scope, sharedContext) {
  $scope.getData = function() {
    $scope.result = sharedContext.getData("Result").value;
  }
}

这里唯一的假设是两个控制器都需要使用确切的密钥来共享数据。若要简化过程，可以使用常量提供程序来共享密钥。另请注意，我使用了下划线.js在共享上下文字典中查找键。

这是你能想到的最简单的解决方案。如您所见，工厂是一个简单的对象，并且由于该构造，它是通过引用而不是通过值传递的，这意味着在两个控制器中dataFactory是相同的

http://plnkr.co/edit/eB4g4SZyfcJrCQzqIieD?p=preview

var app = angular.module('plunker', []);
app.controller('ControllerOne', function (dataFactory) {
    this.formFields = dataFactory
});
app.controller('ControllerTwo', function (dataFactory) {
    this.formData = dataFactory
});
app.factory('dataFactory', function () {
    return {};
})

编辑

app.factory('dataFactory', function () {
    var factory = {
        method1: function (arg) {
            console.log('method1: ', arg)
            factory.method2('called from method1')
        },
        method2: function (arg) {
            console.log('method2: ', arg)
        }
    }
    return factory;
})
相关文章：