0

I'm new to angularjs and still teaching myself how it all works, so I'm assuming I'm missing something fundamental here.

Basically, I have a slider.html file that has:

{{priceSlider}}

<rzslider 
    rz-slider-model="priceSlider" 
    rz-slider-always-show-bar="true" 
    rz-slider-translate="translate" 
    rz-slider-on-change="" 
    rz-slider-hide-limit-labels="true" 
    rz-slider-floor="25"
    rz-slider-ceil="10000">
</rzslider>

Now the {{priceSlider}} returns the value just fine when the slider is moved on that page.

So on my main.html page I have:

{{priceSlider}}
<div ng-include="slider.html"></div>

I know the slider.html file is being pulled in just fine because I can see the content for that partial but my problem is that {{priceSlider}} is not updated on main.html like it is on slider.html. I am not sure what I am missing here.

emate
  • 7
  • 6
  • 1
    Check out the 2nd answer here: http://stackoverflow.com/questions/11412410/angularjs-losing-scope-when-using-ng-include The problem is that the ng-include creates a child scope. Children can access parent variables, but not the other way around (at least not directly). – HankScorpio Aug 19 '15 at 19:47
  • Thanks @HankScorpio, I dug deeper and realized I could use $rootScope for my purposes. So I basically set a $rootScope in the controller and was able to access that across the templates. – emate Aug 19 '15 at 21:17
  • Yes, that's possible, but it's kind of a hacky solution. It's akin to making global variables just to be able to access them from anywhere. Some less hacky solutions might be to use $parent (as in that link), or events, or even an intermediary service. But yeah, the quick and dirty solution is to just stick it on the $rootScope – HankScorpio Aug 19 '15 at 22:11

0 Answers0