locker bind to scope doesnt work as expected

[aj0strow]

.config(function (lockerProvider) {
  lockerProvider
      .setDefaultDriver('local')
      .setEventsEnabled(true)
})

.run(function ($rootScope, locker) {
   locker.bind($rootScope, 'session')
})

I expected that to mean "root scope and local storage are always in sync for session key even across browser tabs", but it actually meant "setting root scope session also sets local storage session".

Firebase for example initializes values and updates them when things change (https://www.firebase.com/docs/web/libraries/angular/api.html#angularfire-firebaseobject-bindtoscope-varname).

[eolognt]

Yes, I have understood the service as so too. First who have to locker.get the value and assign it to the variable you want to bind. Can someone confirm?

[tymondesigns]

Apologies for the late response.

I'm not exactly sure what the issue is here. I have created a demo on codepen here.

Any chance you could provide more context. i.e. the code that is run in the controller or something?

Thanks

[eolognt]

I think @aj0strow means that he/she expected that by calling bind you are also watching for changes on the sessionStorage and do an initial sessionStorage.getItem when binding a property. Is this the case?

[aj0strow]

@eolognt the initial set seems fixed http://codepen.io/anon/pen/PqZOxy

[eolognt]

Ok, that looks really nice. But I tested if locker watched for changes on the storage as well as the scope. This doesn't seem to be the case (test yourself by modifying localStorage through the console) and thus the values aren't in sync across browser tabs. This also seems to be the primary topic of this issue.

The way to implement this I think would be to listen on 'storage' events, that triggers every time a value for a key in the webstorage is changed or created: https://developer.mozilla.org/en-US/docs/Web/Events/storage And of course separate storage event triggered by locker on the current tab and those who are not.

Btw, why can you only bind values to the scope? I would find it useful to have this in services as well.

[aj0strow]

@eolognt yeah cross tab sync was the other half and doesn't work yet.

I'd imagine the reason for scopes only is the $watch method.

[tymondesigns]

Ok, thanks for clearing that up guys 👍 I now see the issue..

@eolognt I will see if I can implement storage events, as you mentioned, to make sure things are in sync.

This fix will likely be the final thing for the 1.3 release

Cheers!

[tymondesigns]

Also.. regarding binding to non scope keys...

@aj0strow is correct, without the $watch method. I would need to add a Object.observe()/ Object.watch() polyfill, which is a whole other thing.

I'm not going to rule it out though, as there are some nice little shims, such as this one.

Just concerned about bloating things too much

[tymondesigns]

Tried a couple of things with this.. not 100% happy with the implementation so far...
Just released version 2.0.0 as I didn't want to hold things up too much more.

Going to look at trying to create a more elegant solution