详解Angular的数据显示优化处理


Posted in Javascript onDecember 26, 2016

前面的几篇文章中,我们通过{{}}来渲染数据,今天就来聊聊它。

<div ng-controller="Aaa">
 <div>{{text}}</div>
</div>
<script type="text/javascript">
 alert(123);
 var m1 = angular.module('myApp',[]);
 m1.controller('Aaa',['$scope',function($scope){
 $scope.text = 'xiecg';
 }]);
</script>

详解Angular的数据显示优化处理

问题显而易见了,当我们没有点击确定的时候,下面的代码是不会执行的,所以也没回一直呈现{{text}}的状态,假设网络的带宽很慢的情况下,js脚本还没有加载进来,页面全是{{}}这样的符号,显然用户体验很显然是不好的。

我们利用ng-bind指令可解决此问题。

<div ng-controller="Aaa">
 <div ng-bind="text"></div>
</div>
<script type="text/javascript">
 alert(123)
 var m1 = angular.module('myApp',[]);
 m1.controller('Aaa',['$scope',function($scope){ 
 $scope.text = 'xiecg';
 }]);
</script>

详解Angular的数据显示优化处理

是不是很棒 ? 问题来了,这里不单单只有一个text数据,有很多个,如何写呢?

<div ng-controller="Aaa">
 <div ng-bind-template="{{text}},{{text}}"></div>
</div>
<script type="text/javascript">
 var m1 = angular.module('myApp',[]);
 m1.controller('Aaa',['$scope',function($scope){
 $scope.text = 'xiecg';
 }]);
</script>

 ng-bind-template="{{text}},{{text}}"  多个表单式

 ng-bind="text"  单个表达式

看了上面的介绍,如果还是觉得在标签上写表达式不舒服可通过ng-cloak来解决。。。

<div ng-controller="Aaa">
 <div ng-cloak>{{text}}</div> ng-cloak在渲染之前是为none的,渲染结束後block
</div>
<script type="text/javascript">
 alert(123);
 var m1 = angular.module('myApp',[]);
 m1.controller('Aaa',['$scope',function($scope){
 $scope.text = 'xiecg';
 }]);
</script>

 ng-cloak在渲染之前是为none的,渲染结束後block。

还补充一点,在引入angular的时候,header中会嵌入一段css样式。

详解Angular的数据显示优化处理

假设後端返回给我们一段文字,上面包含了{{}}这些符号,可通过ng-non-bindable来屏蔽angular解析。

<div ng-controller="Aaa">
 <div ng-non-bindable>{{text}}</div>
</div>
<script type="text/javascript">
 var m1 = angular.module('myApp',[]);
 m1.controller('Aaa',['$scope',function($scope){
 $scope.text = 'xiecg';
 }]);
</script>

详解Angular的数据显示优化处理

如果是一段html代码,想解析的话就需要引入插件。。。

完整代码:

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>数据显示优化处理</title>
<script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-sanitize.min.js"></script>
</head>
<body>
<div ng-controller="Aaa">
 <div ng-bind-html="html"></div>
</div>
<script type="text/javascript">
 var m1 = angular.module('myApp',['ngSanitize']); //引入angular插件,需要在模块依赖插件的模块
 m1.controller('Aaa',['$scope',function($scope){
 $scope.html = '<h1>xiecg</h1>';
 }]);
</script>
</body>
</html>

详解Angular的数据显示优化处理

下面在说说angular中处理样式和属性的操作吧。

 样式:

<div ng-class="{red:true,yellow:true}">{{text}}</div>
 <div ng-controller="Aaa">
 <div ng-style="{{style}}">{{text}}</div>
</div>
<script type="text/javascript">
 var m1 = angular.module('myApp',[]);
 m1.controller('Aaa',['$scope',function($scope){
 $scope.text = 'xiecg';
 //对象类型的数据也可以渲染成内联样式
 $scope.style = {
 color : 'red',
 background : 'blue'
 };
 }]);
</script>

属性:

<div ng-controller="Aaa">
 <a ng-href="{{url}}">baidu</a>
 <a ng-attr-href="{{url}}" ng-attr-title="{{text}}">baidu</a>
</div>
<script type="text/javascript">
 var m1 = angular.module('myApp',[]);
 m1.controller('Aaa',['$scope',function($scope){
 $scope.text = 'xiecg';
 $scope.url = 'https://www.baidu.com/';
 }]);
</script>

自定义属性可通过ng-attr-**这样的形式书写。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript 基础知识 被自己遗忘的
Oct 15 Javascript
jquery控制listbox中项的移动并排序的实现代码
Sep 28 Javascript
JavaScript高级程序设计 读书笔记之十 本地对象Date日期
Feb 27 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
Aug 18 Javascript
JavaScript实现动态删除列表框值的方法
Aug 12 Javascript
VueJS全面解析
Nov 10 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
Jan 22 Javascript
Koa 使用小技巧(小结)
Oct 22 Javascript
JS使用new操作符创建对象的方法分析
May 30 Javascript
JavaScript实现单英文金山打字通
Jul 24 Javascript
JavaScript HTML DOM元素 节点操作汇总
Jul 29 Javascript
vue实现购物车案例
May 30 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
Dec 26 #Javascript
手动初始化Angular的模块与控制器
Dec 26 #Javascript
详解Python中logging日志模块在多进程环境下的使用
Dec 26 #Javascript
Angular的事件和表单详解
Dec 26 #Javascript
Angular的MVC和作用域
Dec 26 #Javascript
JS中用try catch对代码运行的性能影响分析
Dec 26 #Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
Dec 26 #Javascript
You might like
PHP 彩色文字实现代码
2009/06/29 PHP
PHP代码网站如何防范SQL注入漏洞攻击建议分享
2012/03/01 PHP
解析strtr函数的效率问题
2013/06/26 PHP
ThinkPHP之用户注册登录留言完整实例
2014/07/22 PHP
php实现给图片加灰色半透明效果的方法
2014/10/20 PHP
9条PHP编程小知识及易犯的小错误
2015/01/22 PHP
PHP静态成员变量
2017/02/14 PHP
PHP实现动态创建XML文档的方法
2018/03/30 PHP
网页打开自动最大化的js代码
2012/08/22 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
2013/09/06 Javascript
javascript日期对象格式化为字符串的实现方法
2014/01/14 Javascript
js清理Word格式示例代码
2014/02/13 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/07/18 Javascript
Javascript核心读书有感之类型、值和变量
2015/02/11 Javascript
JS获取鼠标选中的文字
2016/08/10 Javascript
详解VUE2.X过滤器的使用方法
2018/01/11 Javascript
vue 插值 v-once,v-text, v-html详解
2018/01/19 Javascript
详细解析Python中的变量的数据类型
2015/05/13 Python
python中返回矩阵的行列方法
2018/04/04 Python
Python3+Appium实现多台移动设备操作的方法
2019/07/05 Python
Python OrderedDict的使用案例解析
2019/10/25 Python
使用python+poco+夜神模拟器进行自动化测试实例
2020/04/23 Python
Python如何实现机器人聊天
2020/09/10 Python
家乐福巴西网上超市:Carrefour巴西
2016/10/31 全球购物
Lookfantastic香港官网:英国知名美妆购物网站
2018/06/19 全球购物
希腊香水和化妆品购物网站:Parfimo.gr
2019/10/03 全球购物
美术专业学生个人自我评价
2013/09/19 职场文书
医院总经理岗位职责
2014/02/04 职场文书
李白故里导游词
2015/02/12 职场文书
考研导师推荐信范文
2015/03/27 职场文书
搭讪开场白台词大全
2015/05/28 职场文书
实习感想范文
2015/08/10 职场文书
请学会珍惜眼前,因为人生没有下辈子!
2019/11/12 职场文书
正确使用MySQL update语句
2021/05/26 MySQL
OpenCV实现常见的四种图像几何变换
2022/04/01 Python
win10频率超出范围怎么办?win10老显示超出工作频率范围的解决方法
2022/07/07 数码科技