angular——ng-bind,ng-cloak，ng-src,ng-href解决AngularJS 代码未加载完而出现显示 AngularJS 代码，进而会有闪烁的效果

最新推荐文章于 2018-04-15 16:26:59 发布

simon_dg

最新推荐文章于 2018-04-15 16:26:59 发布

阅读量1k

点赞数

分类专栏： angular 文章标签： angular angularjs 指令

本文链接：https://blog.csdn.net/simon_dg/article/details/78260233

版权

angular 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

浏览器会先将页面解析成DOM树，遇到angular指令，会略过，遇到表达式会当普通字符串。最后，Angular 就会遍历 DOM 树来解析 HTML，根据指令不同，完成不同操作。

采用传统表达式模式

在刷新页面时，会闪现{{username}},最后才被绑定上数据。

<ul ng-app="myapp" ng-init="username='<h1>gaerhaeth</h1>'">
        <li>{{username}}</li>
    </ul>

解决方法：

一、使用ng-bind

<ul ng-app="myapp" ng-init="username='<h1>gaerhaeth</h1>'">
        <li ng-bind="username"></li>
    </ul>

ng-bind还有一个作用是：防止跨脚本攻击。
简单来讲：ng-bind不能绑定标签。上面的输出结果是：<h1>gaerhaeth</h1>
想要绑定标签：用ng-bind-html, 使用此命令需要依赖‘’ngSanitize‘’。angular默认模型里面没有此依赖，所有需要自定义模块，使之依赖。

<body>
    <ul ng-app="myapp" ng-init="username='<h1>gaerhaeth</h1>'">
        <!-- <li ng-bind="username"></li> -->
        <li ng-bind-html="username"></li>
        <!-- 防止跨脚本攻击，用ng-bind-html 绑定标签 -->
    </ul>
    <script>
    </script>
    <script src="node_modules/angular/angular.js"></script>
    <script src="node_modules/angular-sanitize/angular-sanitize.js"></script>
    <script>
    angular.module('myapp', ['ngSanitize']);//自定义一个模块，让它依赖于ngSanitize
    </script>
</body>

二、使用ng-cloak，该命令没有参数

使用该命令需要注意的两点是：

导包在前，可以起效

<head>
    <meta charset="UTF-8">
    <title>ng-cloak指令</title>
    <script src="node_modules/angular/angular.js"></script>
</head>

<body>
    <h1 ng-app ng-cloak>{{'grgaargj'}}</h1>
</body>

2.导包在后，加上下面一段代码才会起效
下面这段代码，是起效过后，angular自己添加的，这里将那段代码，复制过来，放在样式里面。

    <style>
    @charset "UTF-8";
    [ng\:cloak],
    [ng-cloak],
    [data-ng-cloak],
    [x-ng-cloak],
    .ng-cloak,
    .x-ng-cloak,
    .ng-hide:not(.ng-hide-animate) {
        display: none !important;
    }

    ng\:form {
        display: block;
    }

    .ng-animate-shim {
        visibility: hidden;
    }

    .ng-anchor {
        position: absolute;
    }
    </style>

ng-src和ng-href

<body ng-app ng-init="image='image/22.png'">
    <img ng-src="{{image}}" alt="">
    <a ng-href=""></a>
    <!-- DOM树解析时会去查询路径，虽然最后会显示，但控制台会一直保留找不到图片路径的错误 -->
    //如果使用src或者href解析的时候会去访问{{image}}
    <script src="node_modules/angular/angular.js"></script>
</body>

simon_dg

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular——ng-bind,ng-cloak，ng-src,ng-href解决AngularJS 代码未加载完而出现显示 AngularJS 代码，进而会有闪烁的效果

浏览器会先将页面解析成DOM树，遇到angular指令，会略过，遇到表达式会当普通字符串。最后，Angular 就会遍历 DOM 树来解析 HTML，根据指令不同，完成不同操作。采用传统表达式模式在刷新页面时，会闪现{{username}},最后才被绑定上数据。<ul ng-app="myapp" ng-init="username='<h1>gaerhaeth</h1>'"> <l
复制链接

扫一扫

专栏目录