Làm thế nào để nhảy vào neo trong góc nhìn của góc?

Tôi có nhiều mục trong danh sách dài. Làm cách nào để người dùng của tôi chuyển sang (tức là dấu trang) cho một mục cụ thể bằng cách truy cập mypage.html # the_item_id?Làm thế nào để nhảy vào neo trong góc nhìn của góc?

Thực ra, có thể khi tôi sử dụng chế độ xem nội tuyến [Mẫu 1], nhưng không phải khi tôi sử dụng chế độ xem từng phần [Mẫu 2]. Có lỗi trong trường hợp sau hay tôi phải sử dụng bất kỳ giải pháp nào khác?

Cảm ơn trước!

Mẫu 1: Bạn có thể truy cập page.html # A100 để xem mục 100 ::

<!doctype html> 
<html ng-app> 
    <head> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script> 
    <script> 
     function MainCtrl($scope){ 
      $scope.items = []; 
      for(var i=0; i<200; i++){$scope.items.push({id: i})} 
     } 
    </script> 
    </head> 
    <body ng-controller='MainCtrl'> 
    <div> 
     <ul> 
     <li ng-repeat="i in items"><a id='a{{i.id}}'>{{i.id}}</a></li> 
     </ul> 
    </div> 
    </body> 
</html>

Mẫu 2: không thể truy cập page2.html # A100 để xem mục 100, TẠI SAO? ::

<!doctype html> 
<html ng-app> 
    <head> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script> 
    <script> 
     function MainCtrl($scope){ 
      $scope.items = []; 
      for(var i=0; i<200; i++){$scope.items.push({id: i})} 
     } 
    </script> 
    </head> 
    <body ng-controller='MainCtrl'> 
    <div ng-include="'scroll_view.html'"><!-- MUST use "'...'" notation here --></div> 
    </body> 
</html>

Và đây là scroll_view.html cần thiết cho mẫu 2 ::

<div> 
    <ul> 
    <li ng-repeat="i in items"><a id='a{{i.id}}'>{{i.id}}</a></li> 
    </ul> 
</div>

Nguồn

2012-12-09 RayLuo

Tôi đang gặp vấn đề tương tự. Bạn đã tìm ra một giải pháp chưa? Từ những gì tôi đã phát hiện ra, vấn đề là jqlite 'element.getElementById' trả về null bên trong hàm' scroll'. Có lẽ vì nội dung không tồn tại trong DOM? – NilsH

Bạn phải sử dụng autoscroll thuộc tính trên ng-bao gồm.

Kiểm tra các tài liệu ở đây: http://docs.angularjs.org/api/ng.directive:ngInclude

autoscroll (không bắt buộc) - {string =} - Cho dù ngInclude nên gọi $ anchorScroll để di chuyển các khung nhìn sau khi nội dung được tải. Nếu thuộc tính không được đặt, hãy tắt di chuyển. Nếu thuộc tính được đặt không có giá trị, hãy bật cuộn. Nếu không, chỉ cho phép cuộn nếu biểu thức đánh giá thành giá trị trung thực.

Vì vậy, trong trường hợp của bạn:

<div ng-include="'scroll_view.html'" autoscroll></div>

Nguồn

2012-12-10 21:04:59 matys84pl

Cảm ơn bạn đã lừa! Tôi thực sự nên đi qua tất cả các tài liệu. – RayLuo

Tôi rất vui vì đã trợ giúp. Bạn có thể vui lòng chọn câu trả lời như được chấp nhận sau đó không? ;) – matys84pl

Vì vậy, nó được cho là giải quyết vấn đề, theo lý thuyết. Hóa ra vấn đề phức tạp hơn chúng ta nghĩ. Khi tôi thử nghiệm trên Chrome 23, chỉ thực thi nội tuyến (sample1) hoạt động như mong đợi. Khi sử dụng chế độ xem từng phần, có hoặc không có cài đặt tự động kiểm tra, ký hiệu page.html # anchor không thể đưa chúng tôi đến đích. Tình hình thậm chí còn tồi tệ hơn trong Firefox 17, không phải các công trình kết hợp ở trên. Tôi đang thử nghiệm với AngularJS 1.0.3, trên nền tảng Windows. Không biết đó chỉ là tôi hay không. Vì vậy, chỉ cần mở câu hỏi này để xem người khác có thể phản hồi như thế nào. Cảm ơn bạn @ matys84pl anyway. – RayLuo

Tôi nghĩ html5Mode cần phải được thiết lập là true, nhưng tôi không chắc chắn. Xem nếu làm việc này cho bạn (nó đã làm cho tôi, nhưng tôi chỉ được thử nghiệm trên Chrome 23 tải trang bằng cách sử dụng file: /// ...):

<!doctype html> 
<html ng-app="app"> 
    <head> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script> 
    <script src="app.js"></script> 
    <script type="text/ng-template" id="scroll_view.html"> 
     <div> 
     <ul> 
      <li ng-repeat="i in items"><a id='a{{i.id}}'>{{i.id}}</a></li> 
     </ul> 
     </div> 
    </script> 
    <script> 
     function MainCtrl($scope){ 
      $scope.items = []; 
      for(var i=0; i<200; i++){$scope.items.push({id: i})} 
     } 
    </script> 
    </head> 
    <body ng-controller='MainCtrl'> 
    <div ng-include="'scroll_view.html'"><!-- MUST use "'...'" notation here --></div> 
    </body> 
</html>

app.js:

var app = angular.module('app', []). 
    config(function($locationProvider) { 
    $locationProvider.html5Mode(true); 
    })

Nguồn

2012-12-11 17:28:15

Làm thế nào để nhảy vào neo trong góc nhìn của góc?

Trả lời

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