AngularJs: Trang tải lại

<a ng-href="#" class="navbar-brand" title="home" data-translate>PORTAL_NAME</a>

Tôi muốn tải lại trang. Tôi có thể làm cái này như thế nào?

Bạn có thể sử dụng reloadphương pháp của $routedịch vụ. Tiêm $routevào bộ điều khiển của bạn và sau đó tạo một phương thức reloadRoutetrên của bạn $scope.

$scope.reloadRoute = function() {
   $route.reload();
}

Sau đó, bạn có thể sử dụng nó trên liên kết như thế này:

<a ng-click="reloadRoute()" class="navbar-brand" title="home"  data-translate>PORTAL_NAME</a>

Phương pháp này sẽ khiến tuyến đường hiện tại tải lại. Tuy nhiên, nếu bạn muốn thực hiện làm mới hoàn toàn, bạn có thể tiêm $windowvà sử dụng:

$scope.reloadRoute = function() {
   $window.location.reload();
}

Chỉnh sửa sau (ui-router):

Như JamesEddyEdwards và Dunc đã đề cập trong câu trả lời của họ, nếu bạn đang sử dụng angular-ui / ui-router, bạn có thể sử dụng phương pháp sau để tải lại trạng thái / tuyến đường hiện tại. Chỉ cần tiêm $statethay vì $routevà sau đó bạn có:

$scope.reloadRoute = function() {
    $state.reload();
};

windowĐối tượng được cung cấp thông qua $windowdịch vụ để thử nghiệm và chế nhạo dễ dàng hơn , bạn có thể đi với một cái gì đó như:

$scope.reloadPage = function(){$window.location.reload();}

Và:

<a ng-click="reloadPage"  class="navbar-brand" title="home"  data-translate>PORTAL_NAME</a>

Là một lưu ý phụ, tôi không nghĩ $ route.reload () thực sự tải lại trang, nhưng chỉ có tuyến .

 location.reload(); 

Có lừa không.

<a ng-click="reload()">

$scope.reload = function()
{
   location.reload(); 
}

Không cần tuyến đường hay bất cứ thứ gì chỉ đơn giản là js cũ

Tương tự như câu trả lời của Alexandrin, nhưng sử dụng $ state thay vì $ route:

(Từ câu trả lời SO của JimTheDev tại đây .)

$scope.reloadState = function() {
   $state.go($state.current, {}, {reload: true});
}

<a ng-click="reloadState()" ... 

Nếu sử dụng Angenses bộ định tuyến tiên tiến hơn mà tôi chắc chắn khuyên dùng thì bây giờ bạn có thể chỉ cần sử dụng:

$state.reload();

Điều này về cơ bản là làm giống như câu trả lời của Dunc.

Giải pháp của tôi để tránh vòng lặp vô hạn là tạo một trạng thái khác đã thực hiện chuyển hướng:

$stateProvider.state('app.admin.main', {
    url: '/admin/main',
    authenticate: 'admin',
    controller: ($state, $window) => {
      $state.go('app.admin.overview').then(() => {
        $window.location.reload();
      });
    }
  });

Góc 2+

Tôi đã tìm thấy điều này trong khi tìm kiếm Angular 2+, vì vậy đây là cách:

$window.location.reload();

Thật dễ dàng để chỉ sử dụng $route.reload()(đừng quên tiêm $ route vào bộ điều khiển của bạn), nhưng từ ví dụ của bạn, bạn chỉ có thể sử dụng "href" thay vì "ng-href":

<a href=""  class="navbar-brand" title="home"  data-translate>PORTAL_NAME</a>

Bạn chỉ cần sử dụng ng-href để bảo vệ người dùng khỏi các liên kết không hợp lệ do họ nhấp vào trước khi Angular thay thế nội dung của các thẻ {{}}.

Trên Angular 1.5 - sau khi thử một số giải pháp trên muốn chỉ tải lại dữ liệu mà không làm mới toàn bộ trang, tôi gặp vấn đề với việc tải dữ liệu đúng cách. Mặc dù vậy, tôi nhận thấy rằng khi tôi đi đến một tuyến đường khác và sau đó tôi quay trở lại hiện tại, mọi thứ đều hoạt động tốt, nhưng khi tôi chỉ muốn tải lại tuyến đường hiện tại bằng cách sử dụng $route.reload(), thì một số mã không được thực thi đúng. Sau đó, tôi đã cố gắng chuyển hướng đến tuyến đường hiện tại theo cách sau:

$scope.someFuncName = function () {
    //go to another route
    $location.path('/another-route');
};

và trong cấu hình mô-đun, thêm cái khác when:

.config(['$routeProvider', function($routeProvider) {
     $routeProvider.when('/first-page', {
         templateUrl: '/first-template',
         controller: 'SomeCtrl'
     }).when('/another-route', {//this is the new "when"
         redirectTo: '/first-page'
     });
}])

và nó hoạt động tốt cho tôi Nó không làm mới toàn bộ trang, mà chỉ khiến bộ điều khiển và mẫu hiện tại tải lại. Tôi biết đó là một chút hack, nhưng đó là giải pháp duy nhất tôi tìm thấy.

<a title="Pending Employee Approvals" href="" ng-click="viewPendingApprovals(1)">
                    <i class="fa fa-user" aria-hidden="true"></i>
                    <span class="button_badge">{{pendingEmployeeApprovalCount}}</span>
                </a>

và trong bộ điều khiển

 $scope.viewPendingApprovals = function(type) {
                if (window.location.hash.substring(window.location.hash.lastIndexOf('/') + 1, window.location.hash.length) == type) {
                    location.reload();
                } else {
                    $state.go("home.pendingApproval", { id: sessionStorage.typeToLoad });
                }
            };

và trong tập tin tuyến đường

.state('home.pendingApproval', {
        url: '/pendingApproval/:id',
        templateUrl: 'app/components/approvals/pendingApprovalList.html',
        controller: 'pendingApprovalListController'
    })

Vì vậy, nếu id được truyền trong url giống như những gì đến từ hàm được gọi bằng cách nhấp vào neo, thì chỉ cần tải lại, nếu không thì theo tuyến được yêu cầu.

Xin hãy giúp tôi cải thiện câu trả lời này, nếu điều này có ích. Bất kỳ, đề nghị đều được chào đón.

Điều này có thể được thực hiện bằng cách gọi phương thức reload () của đối tượng cửa sổ bằng JavaScript đơn giản

window.location.reload();

Tôi muốn đề nghị tham khảo trang. Đề nghị chính thức

https://docs.angularjs.org/guide/$location

Điều này có thể được thực hiện bằng cách gọi phương thức reload () trong JavaScript.

location.reload();