隐藏 angularjs 原始范围变量（原始 html 模板）用于 html 页面中的数据绑定，直到 angular 应用程序未初始化且未加载数据

Question

我正在使用 Angularjs 作为我的前端框架。在我的应用程序中，我使用 Index.cshtml 作为我的母版页（顶部水平导航栏包含在 Index.cshtml 页面中），并且在其中我使用 Angularjs 渲染 html 部分。当页面最初加载并且 Angularjs 应用程序尚未初始化时，我在 Index.cshtml 页面中用于数据绑定的范围变量（如上图所示：“ {{firstName}}" 和 {{lastName}}) 以原始形式可见，这是不应该发生的。理想的行为应该是：这些范围变量对最终用户不可见，除非数据绑定到它们，即在加载页面而不是原始变量时，应该没有任何东西，一旦 Angular 应用程序初始化和数据分配给范围变量时，应该显示适当的值，例如，当数据分配给范围变量 firstName=John 和 lastName=Doe 时，只有它应该显示为 "John Doe".

Index.cshtml:

<!DOCTYPE html>

<html ng-app="smapp">
    <head>
        ..
    </head>
<body>
    <div>
        <!--Bootstrap NavBar-->
        <nav class="navbar navbar-default" role="navigation" ng-controller="MasterController">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div collapse="navCollapsed" class="collapse navbar-collapse navbar-responsive-collapse nav-collapse" id="sm-default-top-fixed-nav">                   
                    <ul class="nav navbar-nav navbar-right">
                        <li><a style="cursor: default !important;"> {{firstName}} {{lastName}}</a></li>
                        <li><a ng-controller="LoginCtrl" ng-click="Logout()"><i class="fa fa-power-off text-danger"></i> Logout</a></li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
        <!--/Bootstrap NavBar-->
        <div class="container-fluid">
            <!--HTML partial views-->
            <ng-view class="view-slide-in"></ng-view>
            <!--/HTML partial views-->
        </div>       

    </div>

</body>
</html>

在顶部导航栏的母版页中，我使用的是 MasterCotroller，它具有范围变量 "firstName"、"lastName"。当用户从登录页面登录时，我为名字和姓氏设置 cookie，并将用户重定向到此页面，在应用程序初始化时的此页面中，在 MasterController 中我获取 cookie，然后设置范围变量的值 firstName 和 lastName.

Angualr 应用程序初始化和配置：

var appRoot = angular.module('smapp', ['ngRoute', 'ui.bootstrap', 'ngResource', 'ngSanitize', 'ngAnimate']);

appRoot.config([
    '$routeProvider', function($routeProvider) {
        //Setup routes to load partial templates from server. TemplateUrl is the location for the server view (Razor .cshtml view)
        $routeProvider
            .when('/BrowsePrograms', { templateUrl: '/ngPartials/_Program.html', controller: 'ProgramCtrl' })
            .otherwise({ redirectTo: '/ngPartials/_Login.html', controller: 'LoginCtrl' });
    }
]);

主控制器:

appRoot.controller('MasterController', function ($scope) {
    $scope.firstName = $.cookie('FName');
    $scope.lastName = $.cookie('LName');
});

我的问题是，我应该如何避免显示 Angularjs 原始模型绑定（{{firstName}} 和 {{lastName}}），直到应用程序未完全初始化且范围变量未分配有什么价值吗？

Answer 1

使用 ng-cloak 指令。

https://docs.angularjs.org/api/ng/directive/ngCloak

例如：

<body ng-cloak>
    <!-- any html code with {{ angular data }} -->
</body

隐藏 angularjs 原始范围变量（原始 html 模板）用于 html 页面中的数据绑定，直到 angular 应用程序未初始化且未加载数据

Hide angularjs raw scope variables(raw html template)used for data binding in html page untill the angular app is not initialized & data is not loaded

javascript

asp.net-mvc

razor

asp.net-mvc-4

angularjs