2015-04-20 19 views
6

Tôi đang sử dụng AngularJS (MEAN.io stack) và tôi đang gặp trục trặc gây phiền nhiễu liên quan đến cuộn.Cuộn luôn ở trên cùng trong AngularJS

Khi người dùng nhấp vào liên kết, trang đích sẽ có cùng vị trí cuộn so với trang gốc, thay vì ở trên đầu trang.

Đối với sửa chữa hành vi kỳ lạ này, tôi sử dụng tiếp theo:

$rootScope.$on("$viewContentLoaded", function() { 
    $anchorScroll(); 
}); 

Nhưng mã này làm cho mỗi trang duy nhất mất cuộn vào vị trí hàng đầu, đó là gây phiền nhiễu cũng vì người dùng phải có khả năng quay trở lại và phục hồi vị trí cuộn trước đó.

Bất kỳ đề xuất nào? Làm thế nào tôi có thể có được kết quả mong muốn?

Cảm ơn!

Chỉnh sửa --------------------

Khi tôi đã cố gắng sử dụng giải pháp ng-view + autoscroll, nó không hoạt động cho tôi và tôi không biết tại sao.

Đây là cách tôi đang sử dụng nó, trong trang default.html tôi được phục vụ bởi các máy chủ:

<body ng-cloak class="ng-cloak" ng-class="{state: true, auth: authPage}" ng-controller="BodyController"> 

     <div ng-include="'/system/views/header.html'"></div> 

    <section class="content"> 
     <div data-ng-include="'/ceh-admin/views/adminShortcuts.html'"></div> 
     <div ng-view autoscroll="true">{% block content %}{% endblock %}</div> 
    </section> 

    <div data-ng-include="'/system/views/footer.html'"></div> 

    {% include '../includes/foot.html' %} 

    </body> 

Vài điều kỳ lạ trong mã HTML của tôi?

Trả lời

0

Theo số ngView documentation bạn cần khai báo cách bạn muốn cuộn sẽ được xử lý.

autoscroll (tùy chọn) chuỗi Cho dù ngView nên gọi $ anchorScroll để cuộn chế độ xem sau khi chế độ xem được cập nhật.

  • Nếu thuộc tính không được đặt, hãy tắt cuộn.
  • Nếu thuộc tính được đặt không có giá trị, hãy bật cuộn.
  • Nếu không, hãy bật cuộn chỉ khi giá trị thuộc tính autoscroll được đánh giá dưới dạng biểu thức mang lại giá trị trung thực.

Nó được tắt theo mặc định, do đó bạn sẽ cần phải thêm dòng sau vào đánh dấu của bạn:

<div ng-view autoscroll></div> 

hoặc (theo các tài liệu và tùy thuộc vào sở thích của bạn):

<div ng-view autoscroll="true"></div> 
+0

Có vẻ như điều đó không làm việc cho tôi cả. Tôi đã chỉnh sửa chủ đề chính cho thấy cách tôi đang sử dụng nó. Bạn có thấy điều gì lạ? –

+0

Bạn có gặp bất kỳ lỗi giao diện điều khiển nào không? Nếu bạn thêm/xóa autoscroll tại đây (http: // jsfiddle.net/dL76co2r /) bạn có thể xem nó hoạt động như thế nào? Đánh dấu của bạn không có vấn đề gì. – RichieAHB

0

Tôi không phải là tốt nhất với js góc, nhưng tôi đã nhận được một vấn đề tương tự và tôi đã khắc phục sự cố bằng cách sử dụng mã sau:

<div data-ng-view data-autoscroll="true"></div> 

bạn có thể mất một cái nhìn tài liệu ở đây: angular doc

Tôi hy vọng nó sẽ giúp

+0

Vâng, cảm ơn vì đã giúp đỡ, nhưng hiện tại giải pháp đó cũng không hiệu quả với tôi. Đã chỉnh sửa chủ đề chính hiển thị cách tôi đang sử dụng tính năng tự động ghi. –

+0

@ RubénJiménez những gì bạn đang sử dụng Angular? bất kỳ lỗi console nào? – gon250

Các vấn đề liên quan