Angularjs观察不同控制器中的ng模型变化

我尝试使用服务在两个不同的控制器之间共享数据并观察变化，但我不知道如何做到这一点。这是我的密码

month-select.component.js：

“严格使用”
有棱角的
.module（'myApp.monthSelect'）
.component（'myApp.monthSelect'{
templateUrl:'monthSelect/month select.template.html'，
控制器：“MonthSelectCtrl”，
css:'monthSelect/month select.style.css'
})
.controller（'MonthSelectCtrl'，['$scope'，'selectedMonthSvc'，function（$scope，selectedMonthSvc）{
selectedMonthSvc.setDate（$scope.dt）
}])

试试这个：

// selectedMonthSvc service:

angular.module('myApp.svc', [])
.factory('selectedMonthSvc', function () {

    var date = '';

    var self = this
    self.setDate = setDate;
    self.getDate = getDate;

    return self;    

    function setDate(value) {
        date = value;
    }
    function getDate() {
        return date;
    }
})

// WeeksListCtrl controller

.controller('WeeksListCtrl', ['$scope', 'selectedMonthSvc', function ($scope, selectedMonthSvc) {

  $scope.getDate = getDate;

  function getDate() {
      return selectedMonthSvc.getDate();
  }
}])

---

首次将

工厂

更改为

服务

：

 .service('selectedMonthSvc', function () {/**/}

进一步

您可以编写

watcher

来监听更改

因此：

$scope.getDate = selectedMonthSvc.getDate

尝试：

这就是你的理由

当第二个控制器更新日期时，第一个控制器监听并反映更改：

angular.module('myApp', [])
    .controller('Ctrl1', function ($scope, App) {
        $scope.status = App.getDate();
        $scope.$watch(function(){
        return App.getDate();
        }, function() {
            $scope.status = App.getDate();
        });
})
    .controller('Ctrl2', function ($scope, App) {
        $scope.status = App.getDate();
        $scope.$watch('status', function() {
            App.setDate($scope.status);
        });
})
    .service('App', function () {
        this.data = {};
        this.data.date = 'someDate';

        var self = this;
        var date = ''

      self.setDate = function (value) {
         this.data.date = value
       }
         self.getDate = function () {
           return this.data.date;
         }
});

---

这是正在工作的plunker

谢谢你的帮助，我试过了，但没有成功：（你能告诉我如何在我的MonthSelectCtrl中更改日期吗？以及如何在WeeksListCtrl模板中检索日期吗？

angular.module('myApp', [])
    .controller('Ctrl1', function ($scope, App) {
        $scope.status = App.getDate();
        $scope.$watch(function(){
        return App.getDate();
        }, function() {
            $scope.status = App.getDate();
        });
})
    .controller('Ctrl2', function ($scope, App) {
        $scope.status = App.getDate();
        $scope.$watch('status', function() {
            App.setDate($scope.status);
        });
})
    .service('App', function () {
        this.data = {};
        this.data.date = 'someDate';

        var self = this;
        var date = ''

      self.setDate = function (value) {
         this.data.date = value
       }
         self.getDate = function () {
           return this.data.date;
         }
});

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

app.controller('firstController', ['$scope','selectedMonthSvc', function($scope, selectedMonthSvc) {
  $scope.date = new Date();

  $scope.changeDate = function() {
    selectedMonthSvc.setDate(new Date())
  }
}]);

app.controller('secondController', ['$scope','selectedMonthSvc', function($scope, selectedMonthSvc) {
  $scope.date = '';

  $scope.selectedMonthSvc = selectedMonthSvc;

  $scope.$watch(function() {
    return $scope.selectedMonthSvc.getDate();
  }, function(newVal) {
    $scope.date = newVal;
  }, true);
}]);

app.factory('selectedMonthSvc', [function() {

  var date = '';

  return {
    getDate: function () {
      return date;
    },
    setDate: function(d) {

      date = d;
    }
  }
}])