AngularJS 中的视图未更新 [英] view is not updated in AngularJS

问题描述

我在尝试显示数据时遇到问题.

• 我发送表单并更新我的数据库(效果很好，后端还可以)
• 我使用页面上的按钮返回主页
• 主页的视图没有更新，总是相同的值.(好像只有加载的模板，没有查询)

我需要点击浏览器的刷新按钮来查看新值.

在硬"刷新后，视图会更新.

为什么我需要完全刷新页面?

这是我的代码

JS:

我的服务 GenericService(我创建此服务是因为我在多个控制器中使用它)

myApp.factory('GenericService', function ($http, $q, MyFunctions) {变量数据 = {};函数 getDataIfNeeded(action) {行动 = 行动 ||'默认';如果(数据[动作]！==未定义){返回 $q.when(data[action]);}返回 $http({url: "php/functions.php",方法:获取"，参数:{行动:行动，虚拟:MyFunctions.randomString(7)}}).then(函数(响应){数据[动作] = response.data;返回数据[动作];});}返回 {获取数据:getDataIfNeeded};});

服务的调用

myApp.controller('listCtrl', ['$scope', '$http', '$rootScope', '$location', 'GenericService',函数 ($scope, $http, $rootScope, $location, GenericService) {GenericService.getData("get_projects").then(function (data) {$scope.projects = 数据；});GenericService.getData("get_projects_draft").then(function (data) {$scope.projects_in_draft = 数据；});}]);

HTML:

<div ng-repeat="项目中的项目"><span>{{ project.nom }}</span>
<div ng-repeat="project_draft in projects_in_draft"><span>{{ project_draft.nom }}</span>

解决方案

您的服务 GenericService 仅在需要时"从服务器获取数据，这意味着如果本地 data代码> 变量不为空.自然，不重新加载服务和提交表单后，数据将不同步！所以你有两个选择:

如果服务器正在创建附加数据，即在提交表单后拥有 AngularJS 没有的数据，您需要执行另一个请求以获取新数据.只需清空本地data变量.

Else，例如，如果服务器只是将数据保存在数据库中，并且不执行任何其他影响页面显示内容的操作，则您没有执行其他请求，因为您已经知道发送到服务器的内容！只需更新本地data变量.

I have an issue when I try to display data.

• I send my form and update my database (it works great, backend is ok)
• I use a button on the page to return to homepage
• The view of the homepage is not updated, always the same values. (It seems that there is only the template that loads, not with queries)

I need to click on the button refresh of the browser to see new values.

After the 'hard' refresh, the view is updated.

Why do I need to completely refresh the page ?

Here is my code

JS :

My service GenericService (I created this service because I use this in several controllers)

myApp.factory('GenericService', function ($http, $q, MyFunctions) {
    var data = {};

    function getDataIfNeeded(action) {

        action = action || 'default';

        if (data[action] !== undefined) {
            return $q.when(data[action]);
        }

        return $http({
            url: "php/functions.php",
            method: "GET",
            params: { 
                action: action, 
                dummy: MyFunctions.randomString(7)
            }
        }).then(function(response) {
            data[action] = response.data;
            return data[action];
        });
    }

    return {
        getData: getDataIfNeeded
    };
});

The call of the service

myApp.controller('listCtrl', ['$scope', '$http', '$rootScope', '$location', 'GenericService',
function ($scope, $http, $rootScope, $location, GenericService) {

  GenericService.getData("get_projects").then(function (data) {
    $scope.projects = data;
  }); 

  GenericService.getData("get_projects_draft").then(function (data) {
    $scope.projects_in_draft = data;
  }); 

 }]);

HTML :

<div ng-controller="listCtrl">
 <div ng-repeat="project in projects">
       <span>{{ project.nom }}</span>
 </div>
 <div ng-repeat="project_draft in projects_in_draft">
       <span>{{ project_draft.nom }}</span>
 </div>
</div>

解决方案

Your service GenericService fetch the data from the server only "if needed", which means if the local data variable isn't empty. Naturally, without reloading the service and after a form submission, the data will be out-of-sync! So you have two choices:

If the server is creating additional data, i.e. possesses data that AngularJS don't have after the form submission, you need to do another request in order to fetch the new data. Just empty the local data variable.

Else, if the server is just saving the data in a database for instance, and doesn't perform any other operation with an impact on what is shown on your page, you don't have to do an other request, since you already know what you sent to the server! Just update the local data variable.

这篇关于AngularJS 中的视图未更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！