个人中心
gpt4 book ai didi

javascript - 隐藏用于 html 页面中数据绑定(bind)的 angularjs 原始范围变量(原始 html 模板)，直到 Angular 应用程序未初始化且数据未加载

转载 作者：行者123 更新时间：2023-11-30 17:00:30 25 4
gpt4 key购买 nike

enter image description here

我使用 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/

25 4 0
文章推荐： c++ - 如何使用 CreateProcess 或 ShellExecute 执行管道命令
文章推荐： c# - WPF。如何获取 TextBlock 的 DrawingContext？
文章推荐： c++ - 预处理之后和使用 CMake 编译之前的自定义构建步骤
文章推荐： c# - 连接到 SSL 加密网站的安全性如何？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com