Javascript 呈现不同HTML的角度HTTP请求

因此，我在URL/检查处有一个rest端点，它返回序列化的用户数据，如下所示：

{
    'username' : 'malikb',
    'email': 'test@gmail.com',
    'first_name': 'Malik',
    'usertype': 'C'
}

我已经设计了我的端点，为未登录的用户返回401状态代码，为已登录的用户返回200状态代码，并且运行良好。但是，我尝试使用Angular的$http服务来推断状态代码和usertype键（如果可用）

本质上，我试图为登录的匿名用户提供不同的导航栏，并根据用户类型为登录的用户提供不同的导航栏。然而，我遇到的问题是请求是异步的。此外，我包含的HTML的ng if和src属性似乎在不断求值，从而发送数千个HTTP请求。有什么方法可以实现这样的功能吗？

由于ng的性能和额外的复杂性，我不经常使用ng。 我首先会尝试将所有ng if更改为ng hide/show

假设ng include html模板中的所有内容都是正确的，并且它接受一个var userData。我建议你试试这样：

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http, $timeout) {
    $http.get("http://blah/check").then(function (response) {
        $timeout(function(){
        //triggers event loop cycle
          $scope.userData = response.data.userData;
        },1)

    });
});

你的html应该是这样的

templat.html actual.html

---

避免在HTML模板中使用异步函数，因为它们会计算每个摘要周期。避免模型和视图的错误。视图应仅渲染模型。控制器使用视图中的用户事件和其他位置的事件修改模型

app.controller('ctrl', function($http) {
    var vm = this;
    this.$onInit = function() {
        vm.userData = { username: 'anonymous' };
        $http.get("/check").then(function(response) {
            vm.userData = response.data;
        });
    };
});

---

避免在HTML模板中使用异步函数，因为它们会计算每个摘要周期。避免混淆模型和视图的关系。视图应仅渲染模型。控制器使用视图中的用户事件和其他位置的事件修改模型。

<div ng-app="myApp" ng-controller="customersCtrl"> 
  <div ng-include="'templat.html'"></div>
</div>

app.controller('ctrl', function($http) {
    var vm = this;
    this.$onInit = function() {
        vm.userData = { username: 'anonymous' };
        $http.get("/check").then(function(response) {
            vm.userData = response.data;
        });
    };
});

<user-navbar ng-hide="vm.userData.username == 'anonymous'></user-navbar>
<anon-navbar ng-show="vm.userData.username == 'anonymous'></anon-navbar>