search

frapontillo / angular-bootstrap-switch

AngularJS directive for the bootstrap-switch jQuery plugin.
Apache License 2.0
301 stars 108 forks source link

A switch that is not visible on page load will not be properly initialized #52

Open Splaktar opened 9 years ago

Splaktar commented 9 years ago

Using: bootstrap-switch: v3.0.2 angular-bootstrap-switch: v0.4.0-alpha.1 - 2014-11-21 angularjs: 1.3.6

If the switch is within a tab that isn't initially visible, then it will not be initialized properly with the value of its ng-model. This is also true with other components that contain/hide the switch like angular-wizard, angular-material tabs (md-tab), etc.

The scope.$watch(attrs.ngModel, function (newValue) { is called properly and sets the state on the element. Later when the element becomes visible, the value is correct but the display state is not.

We're currently working around the issue by setting up an interval which polls to see when the element becomes visible and then makes the call to:

element.bootstrapSwitch('state', newValue === getTrueValue(), true);

This seems to set both the value and display state properly so that they stay in sync, There is likely a better solution.

This does not appear to be covered by an existing test since I was able to clone the project and run the Karma tests with AngularJS 1.3.6. They all passed.

frapontillo commented 9 years ago

Could you please do 2 things?

  1. Try out the latest develop branch of angular-bootstrap-switch
  2. Reference a plunker where the issue is clear

Thanks.

Splaktar commented 9 years ago

Verified that it is reproducible with latest develop version of angular-bootstrap-switch. Working on a plunker.

Splaktar commented 9 years ago

Plunker here: http://plnkr.co/edit/pyAhiI?p=preview

burakkilic commented 9 years ago

+1 I have the same issue.

frapontillo commented 9 years ago

Setting up an interval to solve this seems pretty hackish... Do you guys feel like this is an AngularJS issue? It surely looks like that to me.

dlwhiteman commented 9 years ago

I don't think this is an AngularJS issue because I am also experimenting with another 3rd party switch widget, and it is not having this problem.

Splaktar commented 9 years ago

Another fix that I had to do for an internal directive was to put a $scope.watch on the isolated scope attributes coming into the directive. AngularJS wasn't keeping them in sync with the outside scope changes. Using the watch allowed late changes to the outside model to be reflected within the directive.

Either this is a bug in AngularJS or a new requirement for how isolated scope is supposed to work. I haven't figured out which yet.

treyhoover commented 9 years ago

Has there been any progress on this? I'm facing the same issue.

frapontillo commented 9 years ago

I haven't had any time to work on this, sadly. I will gladly accept PRs that do not make use of polling or any terrible hacky workaround.

treyhoover commented 9 years ago

Actually, it seems to be fixed for me in v0.4.0-alpha.1.

j-r-t commented 9 years ago

it happened to me using the non angular bootstrap switch and quite funny how I stumbled across this thread randomly considering ive been using both. it appears it is a bug in bootstrap switch library IMO.

i worked around by initing the switch upon showing the tab - best I could do for now.

frapontillo commented 9 years ago

@jessertaylor are you able to put up an issue on the bootstrap-switch repository?

j-r-t commented 9 years ago

@frapontillo will do

leewisestamp commented 8 years ago

Any update on this?

frapontillo commented 8 years ago

@leewisestamp the parent bug hasn't been fixed yet.

albertjose commented 8 years ago

Someone got something to fix this issue?