在控制器AngularJS之间共享数据

Question

我正在尝试向控制器1发送一个充满对象的数组到控制器2.但是我在控制器2中得到的只是一个空数组。我得到一个填充的唯一方法是在我的服务中创建一个静态数组。

我的服务

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都返回一个空数组。为什么是这样？

Answer 1

你的$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）观察myData上对$scope服务内部数组的引用：

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

Answer 2

如果你从第一个控制器调用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);
}]);

Answer 3

我建议你使用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;
}]);

Answer 4

另一种方法是使用观察者模式，节省必须使用$watchat all：

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