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

来源：互联网发布：在线js格式化工具编辑：程序博客网时间：2024/05/01 11:57

浏览器会先将页面解析成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>

阅读全文

0 0