在AngularJS控制器之间共享数据

18 浏览
0 Comments

在AngularJS控制器之间共享数据

我正在尝试在各个控制器之间共享数据。使用案例是一个多步表单，在一个输入中输入的数据稍后将在原始控制器之外的多个显示位置中使用。以下是代码，也可在这里查看。

HTML

    
    
Input is : {{FirstName}}

Input should also be here: {{FirstName}}

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

非常感激任何帮助。

admin 更改状态以发布 2023年5月25日
0

2 答案

0 Comments

我更倾向于不使用$watch来实现这个。不用把整个服务分配给控制器的作用域，而是只分配数据。

JS：

var myApp = angular.module('myApp', []);
myApp.factory('MyService', function(){
  return {
    data: {
      firstName: '',
      lastName: ''
    }
    // Other methods or objects can go here
  };
});
myApp.controller('FirstCtrl', function($scope, MyService){
  $scope.data = MyService.data;
});
myApp.controller('SecondCtrl', function($scope, MyService){
   $scope.data = MyService.data;
});

HTML：

  
  Input is : {{data.firstName}}


  Input should also be here: {{data.firstName}}

或者可以使用直接的方法更新服务数据。

JS：

// A new factory with an update method
myApp.factory('MyService', function(){
  return {
    data: {
      firstName: '',
      lastName: ''
    },
    update: function(first, last) {
      // Improve this method as needed
      this.data.firstName = first;
      this.data.lastName = last;
    }
  };
});
// Your controller can use the service's update method
myApp.controller('SecondCtrl', function($scope, MyService){
   $scope.data = MyService.data;
   $scope.updateData = function(first, last) {
     MyService.update(first, last);
   }
});

0
0 Comments

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

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：

    
    First {{Alpha.Field}}

    Second {{Beta.Field}}

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

当应用程序变得更大、更复杂、更难测试时，你可能不想以这种方式从工厂中公开整个对象，而是通过getter和setter等方式给予有限的访问权限：

myApp.factory('Data', function () {
    var data = {
        FirstName: ''
    };
    return {
        getFirstName: function () {
            return data.FirstName;
        },
        setFirstName: function (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 is : {{firstName}}


  Input should also be here: {{firstName}}

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

0