在控制器之间共享数据AngularJS

我想发送一个数组，填充从控制器1到控制器2的对象。但是我在控制器2中得到的是一个空数组。我得到一个填充的唯一方法是当我在我的服务中创建一个静态数组。在控制器之间共享数据AngularJS

我的服务

app.service('myData', function() { 
this.myData = []; 

this.addData = function(data) { 
    this.myData.push(data); 
} 
this.getData = function() { 
    return this.myData; 
}});

控制器1的设置数据

app.controller('controller1',['$scope', 'myData', function($scope, myData) { 
    $scope.addData = function(index, name) { 
     myData.addData({index: index, name: name}); 
    }}]);

控制器2看起来像这样

app.controller('controller2',['$scope', 'myData', function($scope, myData) { 

$scope.myData = myData.getData(); 
$scope.$watch('myData.getData()', function(data){ 
    console.log(data); 
}); 
console.log($scope.myData);}]);

当我在寻找一个答案，我发现的问题很多几乎和我的相似。唯一的区别是我从我的控制器中填充我的服务，而不是创建静态服务。

我的console.logs都返回一个空数组。为什么是这样？

来源

2015-09-18 Eelco

你需要使用根范围内或一个像我的广播或事件 – Rafa

你的手表似乎有点陌生的沟通机制。试试这个'function（）{return myData.getData（）}'而不是'data.getData（）' –

您的$watch表达式应该是一个函数（see the docs for $watch）。给$watch一个字符串告诉Angular检查$scope上的一个属性。与此同时，您错误地将您的myData服务称为字符串'data.getData()'中的“数据”。

1）观看的myData#getData结果：

$scope.$watch(function() { 
    return myData.getData(); 
}, function (data) { 
    console.log(data); 
});

2）观看$scope的参考myData服务的内部数组：

$scope.myData = myData.getData(); 
$scope.$watch('myData', function (data) { 
    console.log(data); 
});

来源

2015-09-18 12:43:12 sdgluck

如果调用从该addData它应该工作第一个控制器，例如：

JSFiddle

.controller('tourCtrl', ['$scope', 'myData', function ($scope, myData) { 
    $scope.addData = function (index, name) { 
     myData.addData({ 
      index: index, 
      name: name 
     }); 
    } 
    $scope.addData('hello', 'world'); 
}]) 
.controller('controller2', ['$scope', 'myData', function ($scope, myData) { 

    $scope.myData = myData.getData(); 
    $scope.$watch('myData', function (data) { 
     console.log(data); 
    }); 
    console.log($scope.myData); 
}]);

来源

2015-09-18 12:46:25

我建议你使用类似pubsub机制的东西。你无法知道数据何时出现。看功能是一项昂贵的操作。您可以在您的服务上构建PubSub机制。

控制器可以注册一个事件，另一个可以发布该事件。所以用最少的资源就可以实现你想要的。

这里是一个样本

app.factory('pubSubService', [function() { 
var pubSubAPI = {}; 
var hooks = []; 

pubSubAPI.publishEvent = function(message) { 
    for (var i = 0; i < hooks.length; i++) { 
     hooks[i](message); 
    } 
}; 

pubSubAPI.subscribeEvent = function(eventFunction) { 

    hooks.push(eventFunction); 
}; 

return pubSubAPI; 
}]);

来源

2015-09-18 12:49:39 bahadir

[这种类型的功能已经在Angular中可用]（http://toddmotto.com/all-about-angulars -emit-广播上发布 - 订阅/）。 – sdgluck

是的，但angularjs上的这种功能适用于范围。除非你想使用rootScope - 我总是试图避免。你不能在这个问题上使用角度功能 – bahadir

另一种方法是使用观察者模式，省去了使用$watch都：

app.service('myData', function() { 
    this.myData = []; 
    var observers = []; 
    var self = this; 

    this.addObserver = function (callback) { 
     observers.push(callback); 
    }; 

    var notifyObservers = function() { 
     angular.forEach(observers, function (callback) { 
      callback(self.myData); 
     }); 
    }; 


    this.addData = function (data) { 
     this.myData.push(data); 
     notifyObservers(); 

    } 
}); 


app.controller('controller2', ['$scope', 'myData', function ($scope, myData) { 

    myData.registerObserverCallback(function (data) { 
     $scope.myData = data; 
     console.log(data); 
    }); 
}]);

来源

2015-09-18 12:54:24 jonnie

在控制器之间共享数据AngularJS

回答

相关问题