Question

我知道很多次都会问这个问题，但没有一个解决方案适合我。

控制器

app.controller('HomeController', function ($scope, $timeout, $http) {

      $scope.eventData = {
        heading: "",
        description: ""
      };

      $http.get("/GetEvents")
        .then(function (response) {

          $scope.eventData.heading = response.data.heading;
          $scope.eventData.description = response.data.description;

          console.log($scope.eventData);
        },
        function (error) {
          console.log(error);
        });

});

HTML

<div>
  <h3>{{eventData.heading}}</h3>
  <p>{{eventData.description}</p>
</div>

有时刷新页面时，它不显示值描述和标题。也许它是空的（“”）字符串。这是随机的，有时值是可见的，有时不是。看起来很简单。我无法找到错误。我不知道为什么这种随机行为。但是，控制台始终打印正确的值。

注意*我也包括jQuery。

Answer 1

以异步方式加载数据，这意味着首先加载HTML（显示所有DOM元素），当您从服务器获得响应时，对象$scope.eventData获得价值。

我认为处理此问题的最佳方法是显示加载程序png 。只需在调用$http.get("/GetEvents")之前显示loader.png并将其隐藏在.then()内。

另一个技巧：

使用ng-if指令来显示＆＃39; loading＆＃39; DOM元素中的文本，直到从服务器获得响应，如下所示：

<div>
  <h3 ng-if="eventData.heading != ''">{{eventData.heading}}</h3>
  <h3 ng-if="eventData.heading == ''">Loading..</h3>

  <p ng-if="eventData.description !=''">{{eventData.description}</p>
  <p ng-if="eventData.description ==''">Loading..</p>
</div>

希望有所帮助，祝你好运。

$ http调用后，有时查看不会更新

1 个答案:

另一个技巧：