无法在AngularJS控制器之间共享数据?

时间:2013-06-26 20:20:15

标签: javascript angularjs angularjs-scope angularjs-controller angularjs-factory

我在egghead.io上看过sharing data between controllers视频,但无法让它发挥作用:

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

myApp.factory('QData', function () {
    return 'hello'
});

function QCtrl($scope, $http, QData) {
  $scope.foo = QData;
}

QCtrl.$inject = ['$scope', '$http', 'QData'];

function YCtrl($scope, $http, QData) {
  $scope.bar = QData;
}

YCtrl.$inject = ['$scope', '$http', 'QData'];

请参阅代码(带有其他引导程序视图)running on Plnkr

4 个答案:

答案 0 :(得分:0)

您应该直接使用中间对象及其属性。

Like this

答案 1 :(得分:0)

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

myApp.factory('QData', function () {
    return 'hello' 
});

function ParentCtrl($scope, $http, QData) {   
    $scope.foo = 'My data'; 
}

QCtrl.$inject = ['$scope', '$http', 'QData'];

function QCtrl($scope, $http, QData) {  }

QCtrl.$inject = ['$scope', '$http', 'QData'];

function YCtrl($scope, $http, QData) { }

YCtrl.$inject = ['$scope', '$http', 'QData'];

答案 2 :(得分:0)

我认为问题出现是因为你的工厂正在返回一个字符串。字符串的行为与js中的对象不同(iirc,当它们被视为对象时,它们被包装成对象,否则它们是基元)。例如

var a = 'hello';
var b = a;
a.x = 1;
console.log(b.x) //undefined

var a = {x: 1}; var b=a; a.y = 1; console.log(b.y); //1

基本上,如果你使用对象会更好,例如:http://plnkr.co/edit/zqCPn9?p=preview

答案 3 :(得分:0)

如果您的服务正在更改QData,而不是QData中的属性 - Angular将丢失对象引用的跟踪,而其他控制器不知道发生了什么。

调整你的代码并添加$ timeout来模拟更新你的QData的$ http请求。分叉你的plunker - 但下面是相关的JS代码。

'use strict';

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

myApp.factory('QData', function () {
    return { text: 'hello' } ;
});

function QCtrl($scope, $http, QData, $rootScope) {
  $scope.foo = QData;
}

QCtrl.$inject = ['$scope', '$http', 'QData', '$rootScope'];

function YCtrl($scope, $http, QData, $rootScope,$timeout) {
  $scope.bar = QData;
  $rootScope.globe = 5;
  $timeout(function()
  {
    QData.text = "Test!"
  },5000);

}

YCtrl.$inject = ['$scope', '$http', 'QData', '$rootScope','$timeout'];