使用服務在angularjs控制器上共享對象

是的，我知道這個問題已被問到，但我仍然遇到以下指南中的問題。使用服務在angularjs控制器上共享對象

我有兩個控制器和要經由服務共享一個簡單對象如下：

var app = angular.module('plunker', []); 

app.controller('CtrlOne', function($scope,DataSrvc) { 
    $scope.data={ 
    var1:'controller1 var one', 
    var2:'controller1 var two' 
    }; 
    $scope.$on('name',function(){ 
    DataSrvc.var1=$scope.data.var1; 
    DataSrvc.var2=$scope.data.var2; 
    }); 
}) 
.controller('CtrlTwo',function($scope,DataSrvc){ 
    $scope.data=DataSrvc; 
}); 

app.factory('DataSrvc',function(){ 
    return { 
    var1:'', 
    var2:'' 
    } 
});

欲控制器2自動更新時控制裝置1改變它的對象。但是我在這裏做錯了什麼？請指教。

這裏http://plnkr.co/edit/LO0qQfyV94A9YEBLsk2R?p=preview代碼

來源

2015-06-29 user804293

我覺得你在使用'$ on（'name'）'時遇到問題。檢查我的plunker使用'$ watch'來更新'DataSrvc'值：http://plnkr.co/edit/Sv4QkzvSJlws3963WVec?p=preview – mostruash

如果你只是想給他們，並更新之間共享一些數據，你甚至都不需要額外的聽衆，你甚至不需要一個工廠。價值存儲就足夠了。你可以這樣做：

var app = angular.module('plunker', []); 

app.value('DataSrvc',{var1:"value 1",var2:"value 2"}); 

app.controller('CtrlOne', function($scope,DataSrvc) { 
$scope.data = DataSrvc; 
}) 

app.controller('CtrlTwo',function($scope,DataSrvc){ 
$scope.data=DataSrvc; 
});

我已經更新了plunker： http://plnkr.co/edit/yCqmHMaH6ev9CA2HwQE1?p=preview

來源

2015-06-29 02:13:31 shalikas

謝謝你的回答。但是，如果我想從CtrlOne中像這樣更改DataSrvc：$ scope.data = {var1：'some var'，var2：'some other var'}，然後將其分配給Srv：DataSrvc = $ scope.data; - 視圖和CtrlTwo不會被更新。請幫助。 – user804293

它會，它只是值是常量，所以你不能改變變量本身（或覆蓋），只有它的值： http://plnkr.co/edit/CMy8PjVhy4vQYXTtepRv?p=preview – shalikas

謝謝非常值得指出。現在我有一個想法如何實現我所需要的。 – user804293

你可以使用一個觀察者模式。使您的服務可觀察並註冊回調以通知觀察員。使用這種方法，你可以訂閱你的兩個訂閱者到你的服務中，爲你的變量添加一個setter，然後通知你所有的觀察者（你的控制器）。

app.controller('CtrlOne', function($scope,DataSrvc) { 
    $scope.data={ 
    var1:'controller1 var one', 
    var2:'controller1 var two' 
    }; 
    $scope.$on('name',function(){ 
    DataSrvc.setVar1=$scope.data.var1; 
    DataSrvc.setVar2=$scope.data.var2; 
    }); 
}) 
.controller('CtrlTwo',function($scope,DataSrvc){ 
    $scope.var1=DataSrvc.getVar1; 
    $scope.var2=DataSrvc.getVar2; 
    DataSrvc.subscribe(function() { 
    $scope.var1=DataSrvc.getVar1; 
    $scope.var2=DataSrvc.getVar2; 
    }); 
}); 

app.factory('DataSrvc',function(){ 
    var callbacks = []; 
    var var1 = ''; 
    var var2 = ''; 
    return { 
    setVar1: setVar1, 
    setVar2: setVar2, 
    getVar1: getVar1, 
    getVar2: getVar2, 
    subscribe: subscribe 
    } 

    //////////////// 
    function getVar1() { 
    return var1; 
    } 

    function getVar2() { 
    return var2; 
    } 

    function setVar1(newVar1) { 
    var1 = newVar1; 
    notify(); 
    } 

    function setVar2(newVar2) { 
    var2 = newVar2; 
    notify(); 
    } 

    function subscribe(callback) { 
    callbacks.push(callback); 
    } 

    function notify() { 
    for(var i = 0; i < callbacks.length; i++) { 
     callbacks[i](); 
    } 
    } 
});

來源

2015-06-29 02:22:36

使用服務在angularjs控制器上共享對象

回答

相關問題