Bind service property to a controller AngularJS

Question

I am trying to constantly update my value in the controller. Can get it to work with the initial property value but it does not update later on. I've tried so many ways of doing this, and went through so many threads but I can't make it work... I've almost gave up on this already as I have no idea what the problem is.

I am trying to avoid using broadcasting as much as I can in this situation. Can you spot something obvious I'm doing wrong?

angular.module('app',[])

.controller('mainCtrl', function(userService) {
  var vm = this;
  
  vm.livePropertyFromService = userService.getValue('property');

  vm.incrementServiceProperty = function() {
    userService.update('property', userService.user.property + 1);
    console.log('userService.user.property = ', userService.user.property);
  }
  
})

.service('userService', function($window) {
  var service = this;
  service.user = {
    property: 0
  };
  
  service.update = function(propertyName, property) {
    service.user[propertyName] = property;
  };
  
  return {
    update: function(propertyName, property) {
      service.user[propertyName] = property;
    },
    getValue: function(key) {
      return service.user[key];
    },
    user: service.user
  }
});

<html ng-app="app">
 <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
 </head>
 <body>
    <div ng-controller="mainCtrl as vm">
      <button ng-click="vm.incrementServiceProperty()">Increment property</button>
      <span ng-bind="vm.livePropertyFromService"></span>
    </div>
  </body>
 </html>

Ric · Answer 1 · 2019-02-15T08:58:49.827

0

vm.incrementServiceProperty = function() {
    userService.update('property', userService.user.property + 1);
    vm.livePropertyFromService = userService.getValue('property');

    console.log('userService.user.property = ', userService.user.property);
}

And

<span>{{vm.livePropertyFromService}}</span>

Should do it!

Also, broadcasting isn't such a bad idea, why so against it? Each controller that has this service passed into it can subscribe to the change and do something with the value.

edited Feb 15 '19 at 08:58

answered Feb 15 '19 at 08:56

Ric

12,855
3
30
36

But this is manually setting the value by getting it every time I increment. Maybe I have not specified that but what I am looking for is to set like a watcher on it for it to update automatically when userService.user.property changes. I might bind this value in many different controllers. This will not let me see the changes in all of them. – LazioTibijczyk Feb 15 '19 at 08:58
See this: https://stackoverflow.com/questions/30437563/angularjs-ng-bind-with-a-function you can't `ng-bind` to a function, you would have to broadcast it also updated my answer to include the broadcast part – Ric Feb 15 '19 at 09:00
I'm not assuming I can, it was my way of trying to get it work. I'm running out of ideas. – LazioTibijczyk Feb 15 '19 at 09:04

score 0 · Accepted Answer · answered Feb 15 '19 at 09:12

I've actually worked it out myself moments after posting this where I have been trying to get it to work the entire yesterday's evening...

I've replaced vm.livePropertyFromService with the object rather than service object's property. From vm.livePropertyFromService to vm.user, assigned userService.user to it and then in the HTML refer to vm.user.property! It magically works like a charm.

angular.module('app',[])

.controller('mainCtrl', function(userService) {
  var vm = this;
  
  vm.user = userService.user;

  vm.incrementServiceProperty = function() {
    userService.update('property', userService.user.property + 1);
    console.log('userService.user.property = ', userService.user.property);
  }
  
})

.service('userService', function($window) {
  var service = this;
  service.user = {
    property: 0
  };
  
  service.update = function(propertyName, property) {
    service.user[propertyName] = property;
  };
  
  return {
    update: function(propertyName, property) {
      service.user[propertyName] = property;
    },
    getValue: function(key) {
      return service.user[key];
    },
    user: service.user
  }
});

<html ng-app="app">
 <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
 </head>
 <body>
    <div ng-controller="mainCtrl as vm">
      <button ng-click="vm.incrementServiceProperty()">Increment property</button>
      <span ng-bind="vm.user.property"></span>
    </div>
  </body>
 </html>

Bind service property to a controller AngularJS

2 Answers2