angular-slider
angular-slider copied to clipboard
prajwalkman
Broken inside ng-repeat
Doesn't work inside an ng-repeat. http://plnkr.co/edit/QcOj4mZKxz5rmsSC1wun?p=preview
The reason is that the ng-repeat does not add the compiled dom elements until the repeater finishes with all items (they do not have any dimensions when the post-link function executes). Not sure about the solution though, as the slider-directive should recalculate positions/dimensions on window resize...
Ok, the following issues are manifestations of the same problem: #12 #10 #8 #6
Basically, when the directive's code kicks in, if it's dom data is not rendered for some reason (hidden at first in bootstrap tabs, waiting for other elements to compile in ng-repeat, etc), the code fails.
I'll close all these issues and open another that I'll post updates on. I'll hack on the code tomorrow; I'm thinking setting up a watcher on the parent's width might work. But this still leaves the Bootstrap tab issue, where querying fullBar.width even after tabs are initialized and slider is visible still returns 0.
Hi, I just meet the ng-repeat issue. prajwalkman, have you investigated watching the parent's width?
Sorry guys, I just moved to a new country and still trying to get my stuff in order. Don't have laptop or broadband yet, progress will be slow for a while. If someone wants to take over in the interim, get in touch with my @ [email protected]
Hello ! Did you solved this problem ? What do you think about re-compile on window onload and custom event ($compile(element)(scope);) ?
Dont forget you can always use "range" :
<li data-ng-repeat="skill in skills">
<input ng-model="skill.weight" type="range" min="0" max="9" step="1" value="{{skill.weight}}"/>
<!-- <slider floor="0" ceiling="10" step="1" precision="1" data-ng-model="skill.weight"></slider> -->
</li>
If you need legacy browser support I would imagine this might work with existing polyfills?
Just my two cents, please update the Readme about this issue accordingly since it will help others from blocking for several hours getting this work inside a ng-repeat before seeing this thread :)
The problem is that the slider is saving a reference to its elements in the compile function, which aren't necessarily valid once it gets to the linking stage. The bit of code that assigns fullBar, selBar, minPtr, etc. just needs to be copied to the top of the compile function, and slightly modified to handle differences between single and range mode.
