详解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 相关文章推荐
js cookies实现简单统计访问次数
Nov 24 Javascript
jquery ajax同步异步的执行最终解决方案
Apr 26 Javascript
jQuery - css() 方法示例详解
Jan 16 Javascript
JS实现在页面随时自定义背景颜色的方法
Feb 27 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
Nov 09 Javascript
基于JS实现EOS隐藏错误提示层代码
Apr 25 Javascript
js 获取元素的具体样式信息getcss(实例讲解)
Jul 05 Javascript
基于Vue开发数字输入框组件
Dec 19 Javascript
vue的diff算法知识点总结
Mar 29 Javascript
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
vue项目中,main.js,App.vue,index.html的调用方法
Sep 20 Javascript
分享一个vue项目“脚手架”项目的实现步骤
May 26 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
手把手教你使用DedeCms V3的在线采集图文教程
2007/04/03 PHP
首页四格,首页五格For6.0(GBK)(UTF-8)[12种组合][9-18][版主安装测试通过]
2007/09/24 PHP
snoopy PHP版的网络客户端提供本地下载
2008/04/15 PHP
Windows下安装Memcached的步骤说明
2010/04/25 PHP
使用php将某个目录下面的所有文件罗列出来的方法详解
2013/06/21 PHP
php生成静态页面的简单示例
2014/04/17 PHP
ThinkPHP3.1新特性之对分组支持的改进与完善概述
2014/06/19 PHP
PHP进阶学习之依赖注入与Ioc容器详解
2019/06/19 PHP
php7 新增功能实例总结
2020/05/25 PHP
IE JS编程需注意的内存释放问题
2009/06/23 Javascript
基于jQuery的简单九宫格实现代码
2012/08/09 Javascript
全面兼容的javascript时间格式化函数(比较实用)
2014/05/14 Javascript
js用typeof方法判断undefined类型
2014/07/15 Javascript
jQuery 选择器详解
2015/01/19 Javascript
javascript编写贪吃蛇游戏
2015/07/07 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
2015/09/04 Javascript
JS验证邮件地址格式方法小结
2015/12/01 Javascript
浅谈Sublime Text 3运行JavaScript控制台
2016/06/06 Javascript
手机Web APP如何实现分享多平台功能
2016/08/19 Javascript
JS快速实现移动端拼图游戏
2016/09/05 Javascript
WebPack基础知识详解
2017/01/16 Javascript
bootstrap table动态加载数据示例代码
2017/03/25 Javascript
微信小程序中显示html格式内容的方法
2017/04/25 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
2017/12/22 Javascript
深入了解JavaScript 防抖和节流
2019/09/12 Javascript
[01:29]2017 DOTA2国际邀请赛官方英雄手办展示
2017/03/18 DOTA
Python读取指定日期邮件的实例
2019/02/01 Python
python实现AES加密解密
2019/03/28 Python
python3.5 cv2 获取视频特定帧生成jpg图片
2019/08/28 Python
Python 使用 environs 库定义环境变量的方法
2020/02/25 Python
python读写数据读写csv文件(pandas用法)
2020/12/14 Python
Overload和Override的区别
2012/09/02 面试题
法律进企业活动方案
2014/03/04 职场文书
学雷锋宣传标语
2014/06/25 职场文书
班子四风对照检查材料思想汇报
2014/09/29 职场文书
市场调研项目授权委托书范本
2014/10/04 职场文书