在 AngularJS 控制器之间共享数据 [英] Share data between AngularJS controllers

问题描述

我正在尝试跨控制器共享数据.用例是一种多步骤形式，在一个输入中输入的数据稍后用于原始控制器之外的多个显示位置.下面和 jsfiddle here 中的代码.

HTML

<input type="text" ng-model="FirstName"><!-- 此处输入的内容--><br>输入是:<strong>{{FirstName}}</strong><!-- 在这里成功更新-->
<小时><div ng-controller="SecondCtrl">输入也应该在这里:{{FirstName}}<!-- 我如何在这里自动更新它?-->

JS

//声明没有依赖项的应用程序var myApp = angular.module('myApp', []);//创建一个工厂以在控制器之间共享数据myApp.factory('数据', function(){//我知道这行不通，但是怎么办呢?var 名字 = '';返回名字；});//步骤 1 控制器myApp.controller('FirstCtrl', function( $scope, Data ){});//步骤 2 控制器myApp.controller('SecondCtrl', function( $scope, Data ){$scope.FirstName = Data.FirstName;});

非常感谢任何帮助.

解决方案

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

JS:

//声明没有依赖项的应用程序var myApp = angular.module('myApp', []);//创建共享事实的工厂myApp.factory('事实', function(){返回{字段:''};});//两个控制器共享一个包含字符串的对象myApp.controller('FirstCtrl', function( $scope, Fact ){$scope.Alpha = 事实；});myApp.controller('SecondCtrl', function( $scope, Fact ){$scope.Beta = 事实；});

HTML:

<input type="text" ng-model="Alpha.Field">第一个 {{Alpha.Field}}
<div ng-controller="SecondCtrl"><input type="text" ng-model="Beta.Field">第二个{{Beta.Field}}

演示: http://jsfiddle.net/HEdJF/

当应用程序变得更大、更复杂且更难测试时，您可能不希望以这种方式从工厂公开整个对象，而是提供有限的访问权限，例如通过 getter 和 setter:

myApp.factory('Data', function () {变量数据 = {名: ''};返回 {getFirstName: 函数 () {返回数据.名字；},setFirstName: 函数 (firstName) {data.FirstName = firstName;}};});

通过这种方法，由消费控制器使用新值更新工厂，并观察更改以获取它们:

myApp.controller('FirstCtrl', function ($scope, Data) {$scope.firstName = '';$scope.$watch('firstName', function (newValue, oldValue) {if (newValue !== oldValue) Data.setFirstName(newValue);});});myApp.controller('SecondCtrl', function ($scope, Data) {$scope.$watch(function () { return Data.getFirstName(); }, function (newValue, oldValue) {if (newValue !== oldValue) $scope.firstName = newValue;});});

HTML:

<input type="text" ng-model="firstName"><br>输入是:<strong>{{firstName}}</strong>
<小时><div ng-controller="SecondCtrl">输入也应该在这里:{{firstName}}

演示: http://jsfiddle.net/27mk1n1o/

I'm trying to share data across controllers. Use-case is a multi-step form, data entered in one input is later used in multiple display locations outside the original controller. Code below and in jsfiddle here.

HTML

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

<hr>

<div ng-controller="SecondCtrl">
    Input should also be here: {{FirstName}}<!-- How do I automatically updated it here? -->
</div>

JS

// declare the app with no dependencies
var myApp = angular.module('myApp', []);

// make a factory to share data between controllers
myApp.factory('Data', function(){
    // I know this doesn't work, but what will?
    var FirstName = '';
    return FirstName;
});

// Step 1 Controller
myApp.controller('FirstCtrl', function( $scope, Data ){

});

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

Any help is greatly appreciated.

解决方案

A simple solution is to have your factory return an object and let your controllers work with a reference to the same object:

JS:

// declare the app with no dependencies
var myApp = angular.module('myApp', []);

// Create the factory that share the Fact
myApp.factory('Fact', function(){
  return { Field: '' };
});

// Two controllers sharing an object that has a string in it
myApp.controller('FirstCtrl', function( $scope, Fact ){
  $scope.Alpha = Fact;
});

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

HTML:

<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>

Demo: http://jsfiddle.net/HEdJF/

When applications get larger, more complex and harder to test you might not want to expose the entire object from the factory this way, but instead give limited access for example via getters and setters:

myApp.factory('Data', function () {

    var data = {
        FirstName: ''
    };

    return {
        getFirstName: function () {
            return data.FirstName;
        },
        setFirstName: function (firstName) {
            data.FirstName = firstName;
        }
    };
});

With this approach it is up to the consuming controllers to update the factory with new values, and to watch for changes to get them:

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

    $scope.firstName = '';

    $scope.$watch('firstName', function (newValue, oldValue) {
        if (newValue !== oldValue) Data.setFirstName(newValue);
    });
});

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

    $scope.$watch(function () { return Data.getFirstName(); }, function (newValue, oldValue) {
        if (newValue !== oldValue) $scope.firstName = newValue;
    });
});

HTML:

<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>

Demo: http://jsfiddle.net/27mk1n1o/

这篇关于在 AngularJS 控制器之间共享数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！