Javascript 在html页面中隐藏用于数据绑定的angularjs原始范围变量（原始html模板），直到angular应用程序未初始化&；未加载数据_Javascript_Asp.net Mvc_Angularjs_Asp.net Mvc 4_Razor

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

javascript asp.net-mvc angularjs asp.net-mvc-4 razor

Javascript 在html页面中隐藏用于数据绑定的angularjs原始范围变量（原始html模板），直到angular应用程序未初始化&；未加载数据,javascript,asp.net-mvc,angularjs,asp.net-mvc-4,razor,Javascript,Asp.net Mvc,Angularjs,Asp.net Mvc 4,Razor,我使用Angularjs作为前端框架。在我的应用程序中，我使用Index.cshtml作为我的母版页（Index.cshtml页面中包含顶部的水平导航栏），并在其中使用Angularjs呈现html部分。当页面开始加载且Angularjs应用程序尚未初始化时，我在Index.cshtml页面中用于数据绑定的范围变量（如上图所示：“{{firstName}”和{lastName}）以其原始形式可见，这是不应该发生的。理想的行为应该是：除非数据绑定到这些范围变量，否则这些范围变量对最终用户不可见，也

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

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>

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');
});

主控制器：

<!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>

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}），直到应用程序未完全初始化且范围变量未分配任何值为止？

使用

ng-clope

指令

例如：

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


@valverde93-谢谢，正是我想要的