Làm cách nào để thay đổi thông số trong url bằng AngularJS?

Question

Tôi muốn thay đổi url trong ứng dụng angularjs của mình khi đang di chuyển bằng cách nhấn vào một trường nhập liệu.

ví dụ:

1. tôi ở trên: http://localhost/test/year/2012
2. tôi sẽ thay đổi ở phía bên thông qua một lĩnh vực đầu vào năm 2013 mà gọi hàm yearIsChanged của tôi, so với các url nên thay đổi để http://localhost/test/year/2013
3. Nhưng với hiện tại của tôi cấu hình url được thay đổi thành http://localhost/test/year/2012/?year=2013

Cấu hình modul của tôi.

var module = angular.module('exampleApp'). 
config(['$routeProvider', function ($routeProvider) { 
    $routeProvider. 
     when('/test/year/:year', {templateUrl: 'partials/test.html', controller: OverviewCtrl, reloadOnSearch: false}). 
     otherwise({redirectTo: '/'}); 
}]); 

hành động điều khiển:

function OverviewCtrl($scope,$routeParams, $location) { 
     $scope.yearIsChanged = function() { 
     $location.search('year', $scope.year); 
    } 
} 

Answer 1

$location.search sẽ tạo ra một địa chỉ như:

http://localhost/test/year/2012?year=2013 

mà không phải là những gì bạn muốn. Bạn cần phải sử dụng $location.url():

function OverviewCtrl($scope,$routeParams, $location) { 
     $scope.yearIsChanged = function() { 
     $location.url('/test/year/' + $scope.year); 
    } 
} 

Answer 2

Trên thực tế nếu bạn sẽ sử dụng 'tìm kiếm' sau đó $ dịch vụ vị trí sẽ thay đổi 'tìm kiếm' một phần của URL, xem URL spec. Vì vậy, AngularJS sẽ phát hiện rằng định tuyến sẽ không được thay đổi và có khả năng không tải lại bộ điều khiển (reloadOnSearch:false).

Nhưng sử dụng các phương thức .url hoặc .path có thể thay đổi toàn bộ URL, nhưng bộ định tuyến AngularJS không thể phát hiện có thể sử dụng lại bộ điều khiển hay không. Vì vậy, tùy chọn duy nhất là áp dụng bảng định tuyến cho url mới và khởi tạo lại các tuyến đường.

Để đạt được mục tiêu của bạn (url cụ thể như/năm/2012) mà không cần điều khiển tái nạp, bạn có thể:

1. viết lại ngView chỉ thị (và có thể một số thay đổi để mặc định định tuyến trong AngularJS) và cố gắng tái sử dụng phạm vi. Điều này nghe có vẻ khá thay đổi.

2. Không sử dụng định tuyến AngularJS mặc định và thực hiện hành vi mong muốn của chính bạn.

Đây là sample Plunker minh họa tùy chọn thứ hai (nhấn nút màu xanh nhỏ trong cửa sổ xem trước để xem URL thay đổi như thế nào, và cũng kiểm tra các nút mà trước/kế tiếp của trình duyệt không tải lại trang/controller).

Answer 3

Bạn nên lưu ý rằng trong lộ trình của bạn:

"khi ('/ kiểm tra/năm/: Năm"

các BOLD từ, là một routeParam và không phải là tìm kiếm được nộp.

Vì vậy, nếu bạn muốn thay đổi tuyến đường của bạn, bạn nên sử dụng này:

function OverviewCtrl($scope,$routeParams, $location) { 
     $scope.yearIsChanged = function() { 
     $location.path('/test/year/'+$scope.year) 
    // .path() will set(or get) your routeParams 
    // .search() will set(or get) your seach fields like your error 
    } 
    }