Creating a service and getting changes (meteor-angular)

help
1

I’m creating a factory (in this case is a service because the factory didn’t work) to save different configurations in my app.

I’ve got so far this service:

import angular from 'angular';
import angularMeteor from 'angular-meteor';

class GlobalConfig {
    constructor() {
        'ngInject';

        this.config = {
            menuRight: {
                style: null
            }
        };
    }

    changeMenuRightStyle(style) {
        this.config.menuRight.style = style;
        console.log('changed');
    }
}

const name = 'globalConfig';

// create a module
export default angular.module(name, [
        angularMeteor
    ])
    .service('GlobalConfig', GlobalConfig);

Not too much to say here, just a object saving a property. This is a service loaded in the component which I want to save some configuration.
I’m using it in 2 different components: in one I modify this variable (style) and in the other one I’m getting the variable.

The one changing it:

// ..some lines skipped (in constructor with service loaded)
var lastX;
$(document).bind('touchmove', function (e){
   var currentX = e.originalEvent.touches[0].clientX;
   that.changingRightMenuStyle(e.originalEvent.touches[0].clientX);
   lastX = currentX;
});
}
changingRightMenuStyle(val) {
        const menuRightStyle = {
            'transform': 'translate('+val+'%,0)',
            '-webkit-transform': 'translate('+val+'%,0)',
            '-moz-transform': 'translate('+val+'%,0)',
            '-ms-transform': 'translate('+val+'%,0)',
            '-o-transform': 'translate('+val+'%,0)'
        };

        this.globalConfig.changeMenuRightStyle(menuRightStyle);
    }

So when I do a touchmove I call the function changing the position and the console displays the console.log('changed')

So far so good.

The problem comes in my second component when I’m getting this value with a helper:

// ..some lines skipped (in constructor with service loaded)
this.globalConfig = GlobalConfig;

this.helpers({
      style() {
        console.log(this.getReactively('globalConfig.config.menuRight.style'));
      }
    });

I’m able to see the previous console only when I change the service property at least 10px and only (that’s the weird part) when I do a touchmove to right (swipe) :fearful:.
The console.log('changed') is always displaying well.

  • How can I watch this property even changing it just 0.00001px?
  • This is my first service/factory with meteor-angular. Is this the best way to save config/general info?

Thank all in advance! :grinning: