如何在 AngularJS 控制器之间有效共享数据？

在 AngularJS 控制器之间共享数据

AngularJS 是用于构建单页应用程序的流行框架。通常，有必要在控制器之间共享数据。一个常见的示例是多步骤表单，其中一步中输入的数据稍后会在多个位置使用。

问题

考虑以下代码：

<div ng-controller="FirstCtrl">
    <input type="text" ng-model="FirstName">
    <br>Input is : <strong>{{FirstName}}</strong>
</div>

<hr>

<div ng-controller="SecondCtrl">
    Input should also be here: {{FirstName}}
</div>

var myApp = angular.module('myApp', []);

myApp.factory('Data', function(){
    var FirstName = '';
    return FirstName;
});

myApp.controller('FirstCtrl', function( $scope, Data ){

});

myApp.controller('SecondCtrl', function( $scope, Data ){
    $scope.FirstName = Data.FirstName;
});

在此代码中，在 FirstCtrl 控制器的输入字段中输入的数据不会在 SecondCtrl 控制器中自动更新。这是因为数据工厂返回一个原始值（FirstName 是一个字符串），而不是对象引用。

解决方案

一个简单的解决方案是使用工厂返回一个对象并让控制器使用对同一对象的引用：

myApp.factory('Fact', function(){
  return { Field: '' };
});

myApp.controller('FirstCtrl', function( $scope, Fact ){
  $scope.Alpha = Fact;
});

myApp.controller('SecondCtrl', function( $scope, Fact ){
  $scope.Beta = Fact;
});

<div ng-controller="FirstCtrl">
    <input type="text" ng-model="Alpha.Field">
    First {{Alpha.Field}}
</div>

<div ng-controller="SecondCtrl">
    <input type="text" ng-model="Beta.Field">
    Second {{Beta.Field}}
</div>

使用这种方法，两个控制器共享对同一对象的引用，并且在一个控制器中对对象所做的更改会自动反映在另一个控制器中。

高级选项

对于更复杂的场景，您可以使用 getter 和 setter 来控制对共享数据的访问。这种方法使您可以更好地控制数据的更新方式，并有助于防止意外的更改。

结论

在 AngularJS 控制器之间共享数据是一项常见任务。通过了解可用的不同技术，您可以选择最适合您的特定应用需求的方法。

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