我使用 Angularjs 作为我的前端框架。在我的应用程序中，我使用 Index.cshtml 作为我的母版页(顶部水平导航栏包含在 Index.cshtml 页面中)，并且在其中我使用 Angularjs 呈现 html 部分。当页面最初加载并且 Angularjs 应用程序尚未初始化时，我在 Index.cshtml 页面中用于数据绑定(bind)的范围变量(如上图所示:“{{firstName}} "和 {{lastName}}) 以其原始形式可见，这是不应该发生的。理想的行为应该是:这些范围变量对最终用户不可见，除非数据绑定(bind)到它们，即在加载页面而不是原始变量时，应该没有任何东西，一旦 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' });
}
]);
主 Controller :
appRoot.controller('MasterController', function ($scope) {
$scope.firstName = $.cookie('FName');
$scope.lastName = $.cookie('LName');
});
我的问题是，我应该如何避免显示 Angularjs 原始模型绑定(bind)器({{firstName}} 和 {{lastName}})，直到应用程序未完全初始化并且范围变量未分配任何值？
最佳答案
使用ng-cloak指令。
https://docs.angularjs.org/api/ng/directive/ngCloak
例如:
<body ng-cloak>
<!-- any html code with {{ angular data }} -->
</body
关于javascript - 隐藏用于 html 页面中数据绑定(bind)的 angularjs 原始范围变量(原始 html 模板)，直到 Angular 应用程序未初始化且数据未加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28961224/