Javascript 为$http请求编写静态回退内容脚本

我已经构建了一个基本的Angular应用程序，它成功地显示HTTP GET请求的结果

我希望包含回退代码，如果GET请求失败，它将显示两个静态HTML元素来代替远程内容

我可以调用一个普通的JS函数来进行DOM操作，但是我想用角度的方法来实现。我已经阅读了很多文档和文章，但我没有看到一个简单的方法来做到这一点。代码如下

我想用执行相同任务的角度代码替换对UpdateUserRor（）的调用

这里有一个提示：

HTML:

{{item.start.local}日期：“dd MMMM”，“h:mma”}

角度：

angular.module('listApp', [])
  .controller('ListController', ['$scope', '$http', function($scope,$http) {
    var eventsList = $scope.eventsList;
    $http.get(URI)
    .success(function(data) {
      console.log(data);
      eventsList.events = data.events;
    }).error(function() {
      updateUIError();
    });
  }]); 

  function updateUIError() {
    var events = document.querySelector('#attractions article');
        events.innerHTML = '<h1>Local Attractions</h1><p>There's lots to do nearby.</p>';
    }

angular.module（'listApp'，[]）
.controller（'ListController'，['$scope'，'$http'，函数（$scope，$http）{
var eventsList=$scope.eventsList；
$http.get（URI）
.成功（功能（数据）{
控制台日志（数据）；
eventsList.events=data.events；
}).错误（函数（）{
updateUIError（）；
});
}]); 
函数updateUIError（）{
var events=document.querySelector（“#文章”）；
events.innerHTML='当地景点附近有很多事可做。
'；
}

您需要创建一个静态错误，并在错误发生时使用

ngIf

<div class="scene fullheight" id="attractions" ng-app="listApp">
    <div ng-controller="ListController">
        <article class="content" ng-if="hasUIError">
            <h1>Local Attractions</h1>
            <p>There's lots to do nearby.</p>
        </article>
        <article class="content" ng-if="!hasUIError">
            <h1>Upcoming Events</h1> 
            <!-- REST OF THE HTML -->
        </article>
    </div>
</div>

当ajax中出现错误时，将其设置为true

$http.get(URI).then(
    function(response) {
        console.log(response);
        $scope.events = response.data.events;
    },
    function() {
       $scope.hasUIError = true;
    }
);

---

您需要创建一个静态错误，并在错误发生时使用

ngIf

<div class="scene fullheight" id="attractions" ng-app="listApp">
    <div ng-controller="ListController">
        <article class="content" ng-if="hasUIError">
            <h1>Local Attractions</h1>
            <p>There's lots to do nearby.</p>
        </article>
        <article class="content" ng-if="!hasUIError">
            <h1>Upcoming Events</h1> 
            <!-- REST OF THE HTML -->
        </article>
    </div>
</div>

当ajax中出现错误时，将其设置为true

$http.get(URI).then(
    function(response) {
        console.log(response);
        $scope.events = response.data.events;
    },
    function() {
       $scope.hasUIError = true;
    }
);

---

这样做：

   angular.module('listApp', [])
  .controller('ListController', ['$scope', '$http', function($scope,$http) {
     var eventsList = $scope.eventsList;
     $http.get(URI)
  .success(function(data) {
     console.log(data);
     eventsList.events = data.events;
}).error(function() {
     eventsList.errorMessage = '<h1>Local Attractions</h1><p>There's lots to do nearby.</p>';
});
}]); 

angular.module（'listApp'，[]）
.controller（'ListController'，['$scope'，'$http'，函数（$scope，$http）{
var eventsList=$scope.eventsList；
$http.get（URI）
.成功（功能（数据）{
控制台日志（数据）；
eventsList.events=data.events；
}).错误（函数（）{
eventsList.errorMessage='当地景点附近有很多事可做。
'；
});
}]); 

---

在HTML中，在ListController的范围内添加一个范围，该范围将包含ngModel=“errorMessage”。您可以添加其他属性以显示/隐藏错误范围和主要内容分区。

执行以下操作：

   angular.module('listApp', [])
  .controller('ListController', ['$scope', '$http', function($scope,$http) {
     var eventsList = $scope.eventsList;
     $http.get(URI)
  .success(function(data) {
     console.log(data);
     eventsList.events = data.events;
}).error(function() {
     eventsList.errorMessage = '<h1>Local Attractions</h1><p>There's lots to do nearby.</p>';
});
}]); 

angular.module（'listApp'，[]）
.controller（'ListController'，['$scope'，'$http'，函数（$scope，$http）{
var eventsList=$scope.eventsList；
$http.get（URI）
.成功（功能（数据）{
控制台日志（数据）；
eventsList.events=data.events；
}).错误（函数（）{
eventsList.errorMessage='当地景点附近有很多事可做。
'；
});
}]); 

---

在HTML中，在ListController的范围内添加一个范围，该范围将包含ngModel=“errorMessage”。您可以添加其他属性以显示/隐藏错误范围和主要内容分区。

在解决问题之前，还有另一个问题需要解决。具体来说，由于您使用的是ControllerAs方法，因此您希望将变量附加到“this”而不是$scope

然后创建一个名为淋浴ROR的变量，该变量将在显示消息时进行计算。然后可以使用ng show指令隐藏/显示消息

angular.module（'listApp'，[]）
.controller（'ListController'，['$http'，
函数（$http）{
var vm=这个；
vm.events=[]；
vm.ror=false；
$http.get（URI）
.成功（功能（数据）{
vm.events=data.events；
}).错误（函数（）{
vm.ror=true；
});
}
]);

安古拉斯普朗克
文件。写（“”）；
当地景点
附近有很多事情要做

{{item.start.local}日期：“dd MMMM”，“h:mma”}



在解决您的问题之前，还有另一个问题需要解决。具体来说，由于您使用的是ControllerAs方法，因此您希望将变量附加到“this”而不是$scope

然后创建一个名为淋浴ROR的变量，该变量将在显示消息时进行计算。然后可以使用ng show指令隐藏/显示消息


angular.module（'listApp'，[]）
.controller（'ListController'，['$http'，
函数（$http）{
var vm=这个；
vm.events=[]；
vm.ror=false；
$http.get（URI）
.成功（功能（数据）{
vm.events=data.events；
}).错误（函数（）{
vm.ror=true；
});
}
]);

安古拉斯普朗克
文件。写（“”）；
当地景点
附近有很多事情要做

{{item.start.local}日期：“dd MMMM”，“h:mma”}



我一直在玩ngIf以及ng show和ng hide，但我无法让它们工作。上面的代码对我不起作用。无论我在控制器中将hasUIError设置为true还是false，都会显示第二篇文章，而隐藏第一篇文章。尝试将我的答案和@jbrown的结合起来-我没有注意到您的视图中有
controllera
-在控制器端使用
vm
实现该部分。或者-您可以更改视图并设置
ng controller=“ListController”
，还可以删除列表中的所有
事件列表。
前缀view@quietquake请注意，我更改了答案，替换了
eventsList.events=data.events带有
$scope.events=response.data.events因此，如果您不使用
controllerAs
method@quietquake我在代码中添加了一个新的更改，我忘了在视图中包含
ng控制器
部分好的，我解决了这个问题并更新了