在控制器之间共享数据 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.logsreturn都是一个空数组。这是为什么？

Answer 1

您的 $watch 表达式应该是一个函数 (see the docs for $watch)。给 $watch 一个字符串告诉 Angular 检查 $scope 上的属性。除此之外，您在字符串 'data.getData()'.

中错误地将 myData 服务引用为 'data'

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

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

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

在控制器之间共享数据 AngularJS

Sharing data between controllers AngularJS

angularjs

angularjs-service