Question

我试图制作一个包含两个部分的页面，这两个部分可以水平来回滑动以占据页面上不同的相对宽度。我们的想法是跟踪分隔两个窗格/部分的（将要）可拖动条的百分位宽度，并使用ng_style自动更新两个窗格的宽度。与拖动栏的位置有关。

以下是Rails应用程序，集成了Angular。 Angular的加载很好 - 没有错误，其余的都工作 - 当页面首次加载时，ng_style正从Angular控制器加载 - 但是它已经加载了当我试图将间隔物拖到两个＆＃34;窗格之间时，不要改变，就像它应该的那样。

这是我的HAML的简化版本（有点像Jade。只是缩进的HTML）：

  #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 }}' }

以下是我的（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}%" }

换句话说，我左边有.sidebar-section，然后是.sidebar-toggle（只是一个垂直条），它应该是可拖动的（这会导致宽度样式改变，一旦我得到这个工作），然后在切换拖动时调整大小的.work-area以及.sidebar。

问题在于，尽管在页面加载时加载了ng_styles，但是当我检查页面并拖动切换栏时，ng_style值明显改变，ng_style更改不会传播到给定元素的style属性。

换句话说，当我检查元素时，我看到这样的东西：

<div class="work_area" ng_style="{ 'width':'48.142857142857146', 'marginLeft':'51.857142857142854' }">

我看了this post并尝试将更新包装到$scope.$watch的样式中，但这并没有改变上述任何行为，这对我来说似乎不对 - ng_style {{1}}向我建议我使用的方式应该有效正确 - 就像在，Angular为您处理绑定，无需明确告诉它何时更新DOM jQuery样式。

任何想法我做错了什么以及如何解决它？（或者可能是更好或更简单的方法来做上述事情？）

谢谢，如果您想查看任何其他文件或其他内容，请与我们联系。

萨莎

Answer 1

ngStyle的工作方式与您的工作方式略有不同。它按原样评估，{{}}无需指向$scope d变量。

#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' }

当您使用{{}}时，它会将其计算为字符串，然后通过ngStyle运行它。 ngStyle最终会看到一个字符串，而不是一个变量。

NG样式无法自动绑定到页面

1 个答案: