在控制器之間共享數據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

回答

相關問題