AngularJS watch value within service

I'm currently developing an AngularJS web application.

I have a primary view (Index), child view (Dashboard) and grandchild view (Raiding The Rails).

http://localhost:4000/#/dashboard/raiding-the-rails/1

Within the grandchild view (Raiding The Rails) I am displaying dress information relevant to the state ID /1, each dress has a specified state ID e.g /1,/2,/3.

I have a controller/service sending the state ID to a console.log (within the parent) and when viewing raiding-the-rails/1 the console.log displays {stateID: "1"}, If I change the URL to raiding-the-rails/4 the console.log doesn't update unless I refresh the page.

Also, When I completely refresh the browser the console.log spits out three objects instead of one?

I've reviewed many sites and have tried and tried again trying to figure this out, I even tried setting up a Watch service but this failed massively.

If anyone could help me out I would be highly grateful!
Thank you.

Console.Log

App:

(function(angular, undefined){
  "use strict";
  var am = angular.module('virtual-fitting', ['ui.router']);
  am.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
      .state('dashboard', {
        url: '/dashboard',
        templateUrl: '../views/dashboard.html'
      })
      .state('dashboard.raidingtherails', {
        url: '/raiding-the-rails',
        templateUrl: '../views/dashboard.raiding-the-rails.html'
      })
      .state('dashboard.raidingtherails.dress', {
        url: '/:id',
        templateUrl: '../views/dashboard.raiding-the-rails.dress.html'
      });
      $urlRouterProvider.otherwise('/');
  });
})(angular);

Service:

(function(angular, undefined) {
  "use strict";
  var am = angular.module('virtual-fitting');
  am.factory('raidingService', function () {
    var raidingService = {
      stateID: null
    };
    return raidingService;
  });
})(angular);

Parent Controller:

(function(angular, undefined) {
  "use strict";
  var am = angular.module('virtual-fitting');
  am.controller('dashboardCtrl', function(raidingService) {
    console.log(raidingService);
  });
})(angular);

Child Controller:

(function(angular, undefined) {
  "use strict";
  var am = angular.module('virtual-fitting');
  am.controller('raidingtherailsCtrl', function($state, $stateParams, raidingService) {
    var self = this;
    raidingService.stateID = $stateParams.id;
  });
})(angular);


ANSWERS:


I assume it's in the parent controller that you want to watch your service?

If so, you could watch a function, like so:

$scope.$watch(function() {
  return raidingService.stateId;
}, function(value) {
  console.log(value);
}, true);

That should work.


MVC pattern used in any framework:

You creating Service with .get() and .set() methods. Set method is common to be used in any place you desire to operate model value and allows you to create one point that will handle changes to your model. The final move in .set() method is .$boradcast() notifying whole application about changes to your model.

Pros:

  • one access point to value
  • application is know about any changes
  • no need to write $watch with watching collections (holly-molly)
  • having access point to changes with '$on' in your controllers $scope

Cons:

  • easy to forget to use .set() method instead of simple assignment


 MORE:


 ? var self = this?
 ? var self = this?
 ? var self = this?
 ? In knockout.js, why "this" is being assigned to "self"?
 ? What is the rationale behind the "var self = this" approach?
 ? Cached this, jQuery
 ? jQuery "this" inside click
 ? What does 'var that = this;' mean in JavaScript?
 ? Should I use self or window to reference the global scope?
 ? Scope with a self-invoking function in Javascript