使用服务在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控制器上共享对象

回答

相关问题