如何在 AngularJS 控制器之间有效共享变量？

在 AngularJS 控制器之间共享变量

AngularJS 应用程序通常需要在控制器之间传递变量以促进通信和数据共享。但是，从不同的控制器访问变量可能会带来挑战。

传统方法

在理想情况下，您可能会尝试直接从另一个控制器访问变量。但是，除非控制器通过分层 $scope 继承模型关联，否则这种方法会失败。

解决方案：使用服务

更有效的解决方案是利用在所有控制器之间共享的服务。通过向您的应用程序注册服务并将其注入所需的控制器，您可以访问其属性和方法来交换数据。

示例服务：

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

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

控制器中的用法：

function Ctrl1($scope, sharedProperties) {
  sharedProperties.setProperty('Updated Value');
}

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

绑定到属性

为了确保共享值动态更新 UI，请考虑绑定到对象的属性而不是原始类型。这允许在整个应用程序中维护引用。

示例：

// Replace 'var property = 'First';' with
var property = { Property1: 'First' };

其他资源

• [绑定变量AngularJS](https://jasonwatmore.com/post/2014/08/14/AngularJS-bind-to-same-variable-in-multiple-scopes-controllers)

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