Angular 呈现不同的 HTTP 请求 HTML

Question

所以我在 URL /check 有一个休息端点，它 returns 像这样序列化用户数据：

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

我已将端点设计为 return 未登录用户的 401 状态代码和已登录用户的 200 状态代码，并且工作正常。但是，我正在尝试使用 Angular 的 $http 服务来推断状态代码和 usertype 键（如果可用）。

本质上，我正在尝试使用 <ng-include> 为登录的匿名用户呈现不同的导航栏，并根据用户类型为登录的用户呈现不同的导航栏。但是，我运行遇到的问题是请求是异步的。此外，我包含的 HTML 的 ng-if 和 src 属性似乎会不断评估，从而发送数千个 HTTP 请求。有什么办法可以实现这样的功能吗？

Answer 1

由于性能和额外的复杂性，我不经常使用 ng-if。我首先会尝试将所有 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

<div>
<div ng-show="userData.type=='C'"></div>
<div ng-show="userData.type=='B'"></div>
<div ng-show="userData.type=='A'"></div>
</div>

actual.html

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

Answer 2

避免在 HTML 模板中使用异步函数，因为它们会评估每个摘要周期。避免模型和视图的 tangling concerns。视图应该只渲染模型。控制器使用来自视图的用户事件和来自其他地方的事件修改模型。

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>

Angular 呈现不同的 HTTP 请求 HTML

Angular HTTP Requests to Render Different HTML

javascript

angularjs

django-rest-framework

angularjs-digest

angularjs-ng-include

templat.html

actual.html