AngularJS：如何在控制器之间传递变量？

javascript angularjs angularjs-controller

2022-08-29 23:50:45

我有两个角度控制器：

function Ctrl1($scope) {
    $scope.prop1 = "First";
}

function Ctrl2($scope) {
    $scope.prop2 = "Second";
    $scope.both = Ctrl1.prop1 + $scope.prop2; //This is what I would like to do ideally
}

我不能在里面使用，因为它是未定义的。但是，如果我试图像这样传递它...Ctrl1Ctrl2

function Ctrl2($scope, Ctrl1) {
    $scope.prop2 = "Second";
    $scope.both = Ctrl1.prop1 + $scope.prop2; //This is what I would like to do ideally
}

我收到一个错误。有人知道如何做到这一点吗？

行为

Ctrl2.prototype = new Ctrl1();

也会失败。

注意：这些控制器不嵌套在彼此内部。

答案 1

在多个控制器之间共享变量的一种方法是创建一个服务，并将其注入到要使用它的任何控制器中。

简单服务示例：

angular.module('myApp', [])
    .service('sharedProperties', function () {
        var property = 'First';

        return {
            getProperty: function () {
                return property;
            },
            setProperty: function(value) {
                property = value;
            }
        };
    });

在控制器中使用服务：

function Ctrl2($scope, sharedProperties) {
    $scope.prop2 = "Second";
    $scope.both = sharedProperties.getProperty() + $scope.prop2;
}

这篇博客对此进行了很好的描述（特别是第2课及以后）。

我发现，如果要跨多个控制器绑定到这些属性，如果绑定到对象的属性而不是基元类型（布尔值，字符串，数字）以保留绑定引用，则效果更好。

示例：而不是 .var property = { Property1: 'First' };var property = 'First';

更新：为了（希望）在这里使事情更清楚，这里有一个小提琴，展示了一个例子：

绑定到共享值的静态副本（在 myController1 中）
- 绑定到基元（字符串）
- 绑定到对象的属性（保存到作用域变量）
绑定到在值更新时更新 UI 的共享值（在 myController2 中）
- 绑定到返回基元（字符串）的函数
- 绑定到对象的属性
- 双向绑定到对象的属性

答案 2

我喜欢用简单的例子来说明简单的事情，:)

下面是一个非常简单的示例：Service


angular.module('toDo',[])

.service('dataService', function() {

  // private variable
  var _dataObj = {};

  // public API
  this.dataObj = _dataObj;
})

.controller('One', function($scope, dataService) {
  $scope.data = dataService.dataObj;
})

.controller('Two', function($scope, dataService) {
  $scope.data = dataService.dataObj;
});

而这里是 jsbin

这是一个非常简单的例子：Factory


angular.module('toDo',[])

.factory('dataService', function() {

  // private variable
  var _dataObj = {};

  // public API
  return {
    dataObj: _dataObj
  };
})

.controller('One', function($scope, dataService) {
  $scope.data = dataService.dataObj;
})

.controller('Two', function($scope, dataService) {
  $scope.data = dataService.dataObj;
});

而这里是 jsbin

如果这太简单了，这里有一个更复杂的例子

另请参阅此处的答案，了解相关的最佳实践评论