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

一尘不染

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

angularjs

我有两个Angular控制器：

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
}

我无法使用Ctrl1内部，Ctrl2因为它是未定义的。但是，如果我尝试像这样传递它…

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();

也失败。

注意： 这些控制器彼此之间不嵌套。

阅读 191

2020-07-04

共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中）
- 绑定到返回原语（字符串）的函数
- 绑定到对象的属性
- 双向绑定到对象的属性

2020-07-04