在控制器 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) 在$scope 上观察对myData 服务内部数组的引用：

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

Answer 2

另一种方法是使用观察者模式，完全不用$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);
    });
}]);

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

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