I am currently working on creating a web page with two sections that can be horizontally slid back and forth to occupy different widths on the page. My idea was to monitor the width percentage of the draggable bar that separates the two panes/sections, and use ng_style to automatically adjust the widths of the two "panes" based on where the bar is dragged.
This project is in a Rails app with Angular integrated. The Angular part is loading without any errors, and everything else is functioning as expected. However, the ng_style is being loaded from the Angular controller when the page first loads up, but it's not updating when I try to drag the spacer between the two sections.
Below is a simplified version of my HAML (similar to Jade) code:
#full-page.fluid{ ng_controller: "ExerciseCtrl", ng_mousemove: 'updateSidebarWidth($event)', ng_mouseup: 'untrackMouseMove()', ng_cloak: true }
.spacer
.fixed-section-container
.exercise-show
%div
.sidebar-section{ ng_style: '{{ sidebarWidthStyle }}' }
.sidebar_header
.sidebar
%div{ markdown: @exercise.body }
.sidebar-toggle{ ng_mousedown: 'trackMouseMove()' }
.work_area{ ng_style: '{{ workAreaWidthStyle }}' }
Here are the relevant lines in my Angular Controller written in Coffeescript:
$scope.sidebarWidth = 35
$scope.trackingMouse = false
$scope.trackMouseMove = -> $scope.trackingMouse = true
$scope.untrackMouseMove = -> $scope.trackingMouse = false
$scope.updateSidebarWidth = (event) ->
if $scope.trackingMouse
pageWidth = $('.emelyn-layout.middle.fluid').width()
x_percent = (event.pageX * 100) / pageWidth
x_percent = Math.max( Math.min(100, x_percent), 0 )
$scope.sidebarWidth = x_percent
$scope.workAreaWidthStyle = { width: "#{99 - $scope.sidebarWidth}%", marginLeft: "#{$scope.sidebarWidth + 1}%" }
$scope.sideBarWidthStyle = { width: "#{$scope.sidebarWidth}%" }
In essence, there is a .sidebar-section on the left, followed by a .sidebar-toggle which is meant to be draggable, causing the width styles to change upon successful implementation. Finally, there is the .work-area which adjusts its size along with the .sidebar when the toggle is dragged.
The current issue is that although the initial ng_styles load on page load and visually update when inspecting the page and dragging the toggle bar, these changes do not reflect in the actual style attributes of the elements.
When inspecting the element, the output looks like this:
<div class="work_area" ng_style="{ 'width':'48.142857142857146', 'marginLeft':'51.857142857142854' }">
I referenced this post and attempted wrapping style updates in a $scope.$watch, but unfortunately, it did not alter any behaviors mentioned above. Based on the documentation regarding ng_style, it seems I am using it correctly and Angular should handle the binding without explicitly updating the DOM with jQuery style.
If you have any suggestions on what I might be doing wrong or how to resolve this issue, or if there is a better or simpler approach to achieving the same functionality, please let me know.
Thank you, and feel free to request any additional files or information,
Sasha