Angularjs watch ng-model change in different controllers

Question

i try to share data between two different controllers using a service and watch changes but i don't find how to do this. Here is my code

month-select.component.js:

'use strict'

angular
.module('myApp.monthSelect')

.component('myApp.monthSelect', {
  templateUrl: 'monthSelect/month-select.template.html',
  controller: 'MonthSelectCtrl',
  css: 'monthSelect/month-select.style.css'
})

.controller('MonthSelectCtrl', ['$scope', 'selectedMonthSvc', function ($scope, selectedMonthSvc) {
  selectedMonthSvc.setDate($scope.dt)

}])

weeks-list.component.js:

'use strict'

angular
.module('myApp.weeksList')

.component('myApp.weeksList', {
  templateUrl: 'weeksList/weeks-list.template.html',
  controller: 'WeeksListCtrl',
  css: 'weeksList/weeks-list.style.css'
})

.controller('WeeksListCtrl', ['$scope', 'selectedMonthSvc', function ($scope, selectedMonthSvc) {
  
  $scope.getDate = selectedMonthSvc.getDate
}])

get-select-month.service.js

angular.module('myApp.svc', [])

.factory('selectedMonthSvc', function () {
  var self = this
  var date = ''

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

It works at init i get the date in my WeeksList controllers, but if i change the date in my MonthSelectCtrl, the value don't update in WeekList.

I'm trying to watch it with $watch but it don't work and have no idea where it goes wrong.

Thank you very much for your help.

Maxim Shoustin · Answer 1 · 2017-09-15T10:41:05.857

1st off change factory to service:

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

Further

You can write watcher to listen on changes.

So instead:

$scope.getDate = selectedMonthSvc.getDate

try:

$scope.getDate = selectedMonthSvc.getDate;
    $scope.$watch('getDate', function() {
        // here you get new value
    });

This is simple demo that demonstrates your case

When second controller updates date, 1st controller listens and reflects on changes:

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;
         }
});

score 0 · Answer 2 · answered Sep 15 '17 at 10:18

0

Try this:

// 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();
  }
}])

answered Sep 15 '17 at 10:18

Faly

13,291
2
19
37

Thank you for your help, i tried and it doesn't work :( – amerej Sep 15 '17 at 10:24
Can you show how you change the date in my MonthSelectCtrl? – Faly Sep 15 '17 at 10:32
And how do you retrieve the date in WeeksListCtrl template? – Faly Sep 15 '17 at 10:35

score 0 · Answer 3 · answered Sep 15 '17 at 10:50

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;
    }
  }
}])

Here is the working plunker https://plnkr.co/edit/w3Y1AyhcGhGCzon8xAsV?p=preview

Angularjs watch ng-model change in different controllers

3 Answers3