Câu hỏi Cập nhật URL trong Angular JS mà không cần xem lại


Tôi đang xây dựng một hệ thống bảng điều khiển trong AngularJS và tôi đang gặp sự cố với việc đặt url qua $location.path

Trong bảng điều khiển của chúng tôi, chúng tôi có một loạt các tiện ích. Mỗi chế độ hiển thị một chế độ xem tối đa lớn hơn khi bạn nhấp vào nó. Chúng tôi đang cố gắng thiết lập liên kết sâu để cho phép người dùng liên kết đến trang tổng quan với tiện ích con được phóng to.

Hiện tại, chúng tôi có 2 tuyến đường trông giống như /dashboard/:dashboardId và /dashboard/:dashboardId/:maximizedWidgetId

Khi người dùng tối đa hóa một tiện ích con, chúng tôi cập nhật url bằng cách sử dụng $location.path, nhưng điều này khiến cho chế độ xem hiển thị lại. Vì chúng tôi có tất cả dữ liệu, chúng tôi không muốn tải lại toàn bộ lượt xem, chúng tôi chỉ muốn cập nhật URL. Có cách nào để đặt url mà không làm cho chế độ xem hiển thị lại không?

HTML5Mode được đặt thành true.


76
2017-08-20 14:03


gốc


Nếu bạn muốn dữ liệu của mình tồn tại những thay đổi tuyến đường ở phía khách hàng, tại sao không đẩy nó vào một dịch vụ? - Riko


Các câu trả lời:


Trên thực tế, chế độ xem sẽ được hiển thị mỗi lần bạn thay đổi url. Đó là cách routeProvider hoạt động trong Angular nhưng bạn có thể vượt qua maximizeWidgetId dưới dạng chuỗi truy vấn không hiển thị lại chế độ xem.

App.config(function($routeProvider) {
  $routeProvider.when('/dashboard/:dashboardId', {reloadOnSearch: false});
});

Khi bạn nhấp vào tiện ích để tối đa hóa:

<a href="#/dashboard/1?maximizeWidgetId=1">Maximum This Widget</a>
or
$location.search('maximizeWidgetId', 1);

URL trong thanh địa chỉ sẽ thay đổi thành http://app.com/dashboard/1?maximizeWidgetId=1

Bạn thậm chí có thể xem khi tìm kiếm thay đổi trong URL (từ một tiện ích này sang tiện ích con khác)

$scope.$on('$routeUpdate', function(scope, next, current) {
   // Minimize the current widget and maximize the new one
});

125
2017-08-31 18:32



Nếu nó sẽ được chấp nhận câu trả lời tôi sẽ tạo ra câu hỏi riêng biệt mà không có bất kỳ ": param" điều. Chỉ cần câu hỏi ngu ngốc đơn giản: làm thế nào để không tái render view. - OZ_
Tôi nghĩ angular-ui-router sẽ là một lựa chọn hiển nhiên trong trường hợp đó. - codef0rmer
Tôi đang sử dụng $routeUpdate biến cố. Tôi nghĩ rằng $routeChangeStart được kích hoạt khi di chuyển đến một vị trí khác. - lucassp
@ lucassp: Oh Yeah. Hãy để tôi cập nhật câu trả lời. - codef0rmer
@ codef0rmer, tôi đã tìm thấy câu trả lời này nhiều lần. Cảm ơn! Câu trả lời tuyệt vời, vẫn sau tất cả thời gian này! - frosty


Bạn có thể đặt thuộc tính reloadOnSearch của $ routeProvider thành false.

Câu hỏi có thể trùng lặp: Bạn có thể thay đổi một đường dẫn mà không cần tải lại bộ điều khiển trong AngularJS không?

Trân trọng


8
2017-08-20 14:44



Có vẻ như nó là một bản sao. Thật không may có vẻ như họ có cùng một vấn đề, miễn là nó là một phần của đường dẫn url, không phải là biến truy vấn, nó sẽ làm mới. - Ian Muir
Không, nó không trùng lặp. - OZ_
Nó không phải là một bản sao, kể từ khi câu hỏi được liên kết là về không tải lại bộ điều khiển và điều này là về không tải lại mẫu. Giải pháp trong câu hỏi được liên kết sẽ làm cho lượt xem tải lại. - Lajos Meszaros


Đối với những người cần thay đổi đường dẫn đầy đủ () mà không cần bộ điều khiển tải lại

Đây là plugin: https://github.com/anglibs/angular-location-update

Sử dụng:

$location.update_path('/notes/1');

6
2017-08-12 11:36



cảm ơn, công trình. Nhưng có lẽ bạn không nên mở rộng vị trí $ gốc? - rofrol


Chúng tôi đang sử dụng giao diện người dùng góc Router thay vì các tuyến đường tích hợp cho một kịch bản tương tự. Nó dường như không tái khởi tạo bộ điều khiển và tái render toàn bộ khung nhìn.


3
2017-08-31 18:08



Tôi đã thử nó và nó tái xuất hiện quan điểm về thay đổi tuyến đường. - OZ_
Bạn đã thử sử dụng chưa $state.transitionTo() thay vì $location.path()? - DreamSonic
Tôi không thay đổi $ location.path () ở tất cả, nơi nên viết $state.transitionTo() sau đó? - OZ_
Trích dẫn: "Khi người dùng tối đa hóa một tiện ích, chúng tôi cập nhật url bằng cách sử dụng location.path, nhưng điều này khiến cho chế độ xem hiển thị lại." Thay vì thay đổi đường dẫn, bạn nên gọi $state.transitionTo()do đó sẽ cập nhật băm url. - DreamSonic
Ý tưởng là bạn nên có hai trạng thái lồng nhau: một cho trang tổng quan của bạn và một cho tiện ích tối đa của bạn. Khi bạn điều hướng từ trạng thái gốc sang trạng thái con, chỉ chế độ xem con sẽ hiển thị lại, không phải chế độ xem gốc. - DreamSonic


Tôi nhận ra đây là một câu hỏi cũ, nhưng vì nó đã cho tôi một ngày tốt rưỡi để tìm câu trả lời, nên ở đây đi.

Bạn không cần chuyển đổi đường dẫn của mình thành chuỗi truy vấn nếu bạn dùng angular-ui-router.

Hiện tại, do những gì có thể được coi là một lỗi, cài đặt reloadOnSearch: false về trạng thái sẽ dẫn đến việc có thể thay đổi tuyến đường mà không cần tải lại chế độ xem. Người dùng GitHub lmessinger thậm chí còn đủ tử tế để cung cấp bản demo của nó. Bạn có thể tìm thấy liên kết từ nhận xét của mình được liên kết ở trên.

Về cơ bản tất cả những gì bạn cần làm là:

  1. Sử dụng ui-router thay vì ngRoute
  2. Ở các tiểu bang của bạn, khai báo những người bạn muốn với reloadOnSearch: false

Trong ứng dụng của tôi, tôi có chế độ xem danh sách danh mục, từ đó bạn có thể đến danh mục khác bằng cách sử dụng trạng thái như sau:

$stateProvider.state('articles.list', {
  url: '{categorySlug}',
    templateUrl: 'partials/article-list.html',
    controller: 'ArticleListCtrl',
    reloadOnSearch: false
  });

Đó là nó. Hi vọng điêu nay co ich!


3
2018-04-04 12:49





Tôi đã triển khai nó như thế nào:
(giải pháp của tôi chủ yếu cho các trường hợp khi bạn cần phải thay đổi toàn bộ tuyến đường, chứ không phải phụ tùng) 

Tôi có trang với menu (menuPage) và dữ liệu không nên được làm sạch trên điều hướng (có rất nhiều đầu vào trên mỗi trang và người dùng sẽ rất rất không hài lòng nếu dữ liệu sẽ biến mất vô tình).

  1. tắt $ routeProvider
  2. trong bộ điều khiển mainPage thêm hai div với thuộc tính chỉ thị tùy chỉnh - mỗi chỉ thị chỉ chứa 'templateUrl' và 'scope: true'

     <div ng-show="tab=='tab_name'" data-tab_name-page></div>
    
  3. Bộ điều khiển mainPage chứa các dòng để mô phỏng định tuyến:

    if (!$scope.tab && $location.path()) {
        $scope.tab = $location.path().substr(1);
    }
    $scope.setTab = function(tab) {
        $scope.tab = tab;
        $location.path('/'+tab);
    };
    

Đó là tất cả. Một chút xấu xí để có chỉ thị riêng biệt cho mỗi trang, nhưng việc sử dụng templateUrl động (như chức năng) trong chỉ thị kích thích việc hiển thị lại trang (và mất dữ liệu đầu vào).


2
2017-09-04 13:04





Nếu tôi hiểu câu hỏi của bạn đúng, bạn muốn,

  1. Tối đa hóa tiện ích khi người dùng bật / bảng điều khiển /: dashboardId và anh ấy tối đa hóa tiện ích.
  2. Bạn muốn người dùng có khả năng quay lại / dashboard /: dashboardId /: maximizedWidgetId và vẫn thấy tiện ích con được phóng to.

Bạn chỉ có thể cấu hình route đầu tiên trong routerConfig và sử dụng RouteParams để xác định xem các widget tối đa được thông qua trong các params trong bộ điều khiển của tuyến đường được cấu hình này và tối đa hóa một thông qua các param. Nếu người dùng tối đa hóa lần đầu tiên, hãy chia sẻ url tới chế độ xem tối đa này với maximizedWidgetId trên giao diện người dùng.

Miễn là bạn sử dụng $ vị trí (mà chỉ là một wrapper trên đối tượng vị trí gốc) để cập nhật đường dẫn nó sẽ làm mới xem.


0
2017-08-31 19:37



Không chỉ $ location sẽ làm mới chế độ xem. ng-include cũng sẽ, ngay cả khi không thay đổi vị trí $. - OZ_
@ OZ_ Tôi đã không đề nghị bao gồm vì đây chỉ là một thay đổi trạng thái bên trong một cái nhìn tôi chỉ đơn thuần đề nghị một cái gì đó giống như ng-nếu đó sẽ được liên kết với một chức năng mà có thể tìm ra routeParams - Sivakumar Kailasam


Tôi có ý tưởng sử dụng

window.history.replaceState ('Object', 'Title', '/ new-url');

Nếu bạn làm điều này và một chu kỳ tiêu hóa xảy ra nó sẽ hoàn toàn mangle những thứ lên. Tuy nhiên nếu bạn đặt nó trở lại đúng url mà angular hy vọng nó ok. Vì vậy, về mặt lý thuyết, bạn có thể lưu trữ đúng url mà angular mong đợi và đặt lại nó ngay trước khi bạn biết một đám cháy tiêu hóa.

Tôi đã không thử nghiệm này mặc dù.


0
2018-02-21 16:42





Dưới đây mã sẽ cho phép bạn thay đổi url mà không cần chuyển hướng như: http: // localhost / # / 691? foo? bar? blabla

for(var i=0;i<=1000;i++) $routeProvider.when('/'+i, {templateUrl: "tabPages/"+i+".html",reloadOnSearch: false});

Nhưng khi bạn thay đổi thành http: // localhost / # / 692, bạn sẽ được chuyển hướng.


-2
2018-01-25 21:33



Tôi không thấy lý do tại sao thêm một câu trả lời ở đây. - gsamaras
một lưu ý của nó cho lịch sử. - abc