如何在不相关的 AngularJS 控制器之间有效地共享变量？

在 AngularJS 控制器之间传递变量

在 AngularJS 中，管理控制器之间的数据流可能具有挑战性，尤其是当它们没有嵌套时。以下是如何实现跨控制器的变量共享：

使用服务

服务是在组件之间共享数据的强大方式。创建一个服务并将其注入到需要访问共享变量的控制器中：

angular.module('myApp')
    .service('sharedProperties', function () {
        var property1 = 'First';
        
        return {
            getProperty1: function () {
                return property1;
            },
            setProperty1: function(value) {
                property1 = value;
            }
        };
    });

在您的控制器中，注入服务并使用其方法来访问和修改共享变量：

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

绑定到共享值

为了实时更新跨控制器的共享值，您可以绑定到对象的属性而不是原始类型：

angular.module('myApp')
    .service('sharedProperties', function () {
        return {
            property1: { Property1: 'First' }
        };
    });

在您的控制器中，绑定到对象的属性而不是原始值：

function Ctrl2($scope, sharedProperties) {
    $scope.prop2 = 'Second';
    $scope.both = sharedProperties.property1.Property1 + $scope.prop2;
}

提示：

• 绑定对象属性时，确保对象本身更新以触发数据绑定。
• 避免直接从一个控制器访问另一个控制器的共享变量，因为这可能会导致未定义的引用。
• 服务提供了一种结构化且有效的方法来管理数据共享并强制执行解耦设计。

以上是如何在不相关的 AngularJS 控制器之间有效地共享变量？的详细内容。更多信息请关注PHP中文网其他相关文章！