AngularJS: 在位置更改后刷新视图

15 浏览
0 Comments

AngularJS: 在位置更改后刷新视图

我有一个有2个视图/控制器的应用程序：\n

app.config(function ($routeProvider, $locationProvider)
{
    $routeProvider
    .when("/", {
        templateUrl: "/vw/managment",
        controller: 'managment-ctrl'
    })
    .when("/add", {
        templateUrl: "/vw/add",
        contoller: 'add-ctrl'
    })
    .otherwise({
        controller: function ()
        {
            window.location.replace('/errors/filenotfound');
        },
        template: ""
    });
    $locationProvider.html5Mode(true);
});

\n路径`/`是我的“首页”，显示来自数据库的项目列表。在这个页面上，用户有一个“添加”按钮，将页面重定向到`/add`。\'Add\'页面允许用户添加来自数据库的项目。用户选择项目并点击“保存”。点击“保存”按钮将项目保存到数据库并重定向回“首页”。\n

$scope.save = function()
{
    // Save login...
    $location.path("/");
};

\n

问题

\n在更改位置路径后，视图更改为“首页”，但仍显示之前添加新项目之前的项目。刷新页面将解决问题，但当然这不是解决办法...\n我猜首页视图正在从缓存中加载。我想强制Angular刷新视图。\n如何做到这一点？

0

3 答案

0 Comments

问题的原因是AngularJS会默认缓存视图，导致在切换路由之后视图没有刷新。解决方法是在路由参数中添加cache: false来禁止AngularJS缓存视图。然而，根据提供的代码来看，这种解决方法并没有解决问题。

0
0 Comments

在AngularJS中，当我们改变路由状态后，需要刷新视图，但有时候我们发现视图没有得到刷新。这个问题的原因是因为我们在改变路由状态的同时，异步调用仍在进行中。解决这个问题的方法是将路由改变的调用放在异步调用的回调函数中。

具体的解决方法如下：

$http.get("保存数据的url").then(function success(result) {
 //保存成功后的逻辑
 $location.path("/"); 
});

在上面的代码中，我们使用$http服务发送一个GET请求来保存数据。在成功的回调函数中，我们可以执行一些保存成功后的逻辑，然后使用$location服务来改变路由状态，最后将路由改变为根路径("/")。

有人可能会问，为什么需要给成功的回调函数命名？这个函数名对我来说看起来很奇怪。除了这一点，我同意你的答案。

事实上，如果你给函数命名，你可以在函数内部引用它自己，并且在错误消息中更容易追踪。因此，尽可能地在代码中使用命名函数。

0
0 Comments

在AngularJS中，当发生页面跳转时，有时候会遇到视图没有刷新的问题。这个问题的出现是因为浏览器会对请求进行缓存，导致页面内容没有更新。下面是两种解决方法：

方法一：通过修改请求的缓存控制头，禁用浏览器缓存请求的结果。代码如下：

app.config(['$httpProvider', function($httpProvider) {
    if (!$httpProvider.defaults.headers.common) {
        $httpProvider.defaults.headers.common = {};
    }
    $httpProvider.defaults.headers.common["Cache-Control"] = "no-cache";
    $httpProvider.defaults.headers.common.Pragma = "no-cache";
    $httpProvider.defaults.headers.common["If-Modified-Since"] = "0";
}]);

方法二：在特定的资源上禁用缓存，这里是指模板文件。可以在模板文件的头部添加以下代码：

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="Sat, 01 Dec 2001 00:00:00 GMT">

通过采用以上两种方法，可以解决AngularJS页面跳转后视图不刷新的问题。

0