CODEWITHSUNDEEP
angularjswatch
amerej
amerej

Reputation: 139

Angularjs watch ng-model change in different controllers

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.

Upvotes: 3

Views: 637

Answers (3)

Arun Redhu
Arun Redhu

Reputation: 1579

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

Upvotes: 0

Maxim Shoustin
Maxim Shoustin

Reputation: 77904

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

Upvotes: 1

Faly
Faly

Reputation: 13356

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

Upvotes: 0

Related Questions