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

问题描述

我想在控制器之间共享数据。用例是一个多步骤的形式，在一个输入中输入的数据在原始控制器以外的多个显示位置以后使用。下面以及 code的jsfiddle这里。

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

任何帮助是极大AP preciated。

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：

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

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

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

HTML

<div ng-controller="FirstCtrl">
  <input type="text" ng-model="Data.FirstName">
  <br>Input is : <strong>{{Data.FirstName}}</strong>
</div>
<hr>
<div ng-controller="SecondCtrl">
  Input should also be here: {{Data.FirstName}}
</div>

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

当应用程序变得更大，更复杂，更难来测试你可能不希望暴露在出厂这样整个对象，而是通过给予getter和setter方法​​，例如有限的访问：

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

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

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