Question

我想知道如何从不同控制器的服务中观察变量。我有两个控制器和一个服务。控制器1所做的变量的任何变化都将放置在控制器2需要不时检查服务内部变量是否发生变化的服务中。但我无法正确观看。这是我的代码。

控制器1

 app.controller('ChooseFleetController',function($scope,shareDataService){                                   
     $scope.$watch('ItineraryDetails', function(newValue, oldValue){
         shareDataService.setData(newValue);
    }, true);
}

控制器2

  app.controller('ItineraryReservationController',function($scope,shareDataService){
     $scope.$watch(function () {
        return shareDataService.ItineraryDetails;
     }, function (newVal) {
       console.log(newVal);
     });
});

SERVICE

app.service('shareDataService', function() {
var ItineraryDetails = {};

var setData = function(data) {
    ItineraryDetails = data;
}   

var getData = function (data) {
  return ItineraryDetails;
}

return {
    setData: setData,
    getData: getData
};
});

Answer 1

ItineraryDetails是shareDataService的私有变量。观察者需要执行getData函数。

app.controller('AppController2',function($scope,shareDataService){
     $scope.$watch(function () {
        //return shareDataService.ItineraryDetails;
        return shareDataService.getData();
     }, function (newVal) {
       console.log(newVal);
     });
});

Answer 2

对于这个问题，我知道的另一个解决方案是在服务中使用$ rootScope。$ broadcast，在控制器中使用$ scope。$ on。这是代码的样子：

服务

app.service('shareDataService', function($rootScope) {

    var ItineraryDetails = {};


    var setData = function(data) {
        ItineraryDetails = data;
        this.$rootScope.$broadcast('itinerary-change', data);
    }   

    var getData = function (data) {
        return ItineraryDetails;
    }

    return {
        setData: setData,
        getData: getData
    };
});

CTRL-1

app.controller('ChooseFleetController',function($scope,shareDataService){
     $scope.$on('itinerary-change', function(event, data){
           console.log(data);
           $scope.$apply(); //if you need to apply change to view immediately
     });
});

CTRL-2

app.controller('ItineraryReservationController',function($scope,shareDataService){
         $scope.$on('itinerary-change', function(event, data){
               console.log(data);
               $scope.$apply(); //if you need to apply change to view immediately
         });
    });

你们对这个解决方案的想法是什么？

Answer 3

您可以使用object：

直接尝试shared service

user: any = {
    "name": '',
    "role": '',
    "isActive": false
}

一旦改变，将反映这两个地方（控制器）。

但是，如果您重新加载页面，更改将再次默认为您在共享服务中定义的内容。

或者你可以localstore拒绝你的要求。

希望这会对你有所帮助。

Answer 4

    angular.module('starter.services',[])
    .factory('shareDataService',function(){
       var ItineraryDetails = {};

       var setData = function(data) {
        ItineraryDetails = data;
     }   

    var getData = function (data) {
        return ItineraryDetails;
    }

    return {
        setData: setData,
        getData: getData
    };
})

在Angular中观察来自不同Controller的服务中的变量

4 个答案: