Angular - - ngCloak、ngController、ngInit、ngModel
ngCloak
ngCloak指令是为了防止Angular应用在启动加载的时候html模板将会被短暂性的展示。这个指令可以用来避免由HTML模板显示造成不良的闪烁效果。
格式: ng-cloak class=“ng-cloak“
使用代码:
<div ng-cloak>{{'Hello World'}}</div>
<div class="ng-cloak">{{'Hello World'}}</div>
ng有两种绑定数据到页面的写法,ngBind和{{hash}},ngBind需要一个载体(比如:<span ng-bind="'Hello World'"></span>),而{{hash}}方式直接绑定(比如:{{'Hello World'}}),ngBind绑定的话,在不断的刷新或者载入页面过慢的情况下不会出现绑定表达式的闪烁,但是{{hash}}方式就会出现表达式闪 烁的情况了(在交互体验上没做的那么完善,把未执行计算的表达式显示出来)。
在用{{hash}}方式的时候需要解决表达式闪烁现象,就需要用到ngCloak指令了,ngCloak指令的实现是先将绑定元素的设置为 display:none,然后在数据解析出来后又显示出来。详情可点击http://www.cnblogs.com/whitewolf/p /3495822.html做进一步学习和了解。
ngController
ngController 指令给页面附上一个controller类。这是Angular如何支持MVC设计模式的关键所在。
格式:ng-controller=“value”
value:controller的名称。
使用代码:
<div ng-app="Demo">
<div ng-controller="testCtrl as ctrl">
{{ctrl.greeting}}
</div>
</div>
(function () {
angular.module("Demo", [])
.controller("testCtrl", testCtrl);
function testCtrl() {
var vm = this;
vm.greeting = "Hello World";
};
}());
ngController指令将在js上定义控制器绑定到页面元素上,那么这一块元素就有这个控制器进行操作了,在controller的$scope上绑定各种数据,可在view内的ngController范围馁进行绑定和展示。
ngInit
ngInit指令允许你在当前范围内执行自定义行为(指定表达式)。
格式:ng-init=“value”
value:表达式。
使用代码:
<div ng-app="Demo">
<div ng-controller="testCtrl">
<div ng-repeat="innerList in list" ng-init="outerIndex = $index">
<div ng-repeat="value in innerList" ng-init="innerIndex = $index">
<span class="example-init">list[ {{outerIndex}} ][ {{innerIndex}} ] = {{value}};</span>
</div>
</div>
</div>
</div>
这个指令用于在一块范围内定义值或者表达式。比如上述例子代码,是把第一层循环的索引传入第二层循环中。
ngModel
Angular的双向数据绑定关键所在。ngModel指令通过这个指令创建的controller给input、select、textarea(或者自定义窗体)绑定scope上的某个属性值。
ngModel主要负责:
- 将视图绑定到模型中,一些指令像input、textarea或者select的需求。
- 提供验证行为。
- 保持控制状态。
- 给元素设置相关css类,包括动画。
- 将控制注册给父窗体。
使用代码:
<div ng-app="Demo">
<div ng-controller="testCtrl as ctrl">
<input ng-model="ctrl.greeting">
</div>
</div>
(function () {
angular.module("Demo", [])
.controller("testCtrl", testCtrl);
function testCtrl() {
var vm = this;
vm.greeting = "Hello World";
};
}());
ngModel指令完美的诠释了Angular的双向数据绑定,很多ng教程的说明双向数据绑定都会用到它。
也就是我们在view修改值后,后端的对应的值也跟着发生一样的变化。
今天下雨,宅着写了一天的代码,当真是风雨无阻啊....编程这东西是会上瘾的....
Angular - - ngCloak、ngController、ngInit、ngModel的更多相关文章
- 002——Angular 目录结构分析、app.module.ts 详解、以及 Angular 中创建组件、组件 详解、 绑定数据
一.目录结构分析 二. app.module.ts.组件分析 1.app.module.ts 定义 AppModule,这个根模块会告诉 Angular 如何组装该应用. 目前,它只声明了 AppCo ...
- JavaScript学习总结(一)——ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
一.JavaScript简介 JavaScript是一种解释执行的脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它遵循ECMAScript标准.它的解释器被称为JavaScript引 ...
- Vue01 Vue介绍、Vue使用、Vue实例的创建、数据绑定、Vue实例的生命周期、差值与表达式、指令与事件、语法糖
1 Vue介绍 1.1 官方介绍 vue是一个简单小巧的渐进式的技术栈,它提供了Web开发中常用的高级功能:视图和数据的解耦.组件的服用.路由.状态管理.虚拟DOM 说明:简单小巧 -> 压缩后 ...
- Nginx 部署、反向代理配置、负载均衡
Nginx 部署.反向代理配置.负载均衡 最近我们的angular项目部署,我们采用的的是Nginx,下面对Nginx做一个简单的介绍. 为什么选择Nginx 轻:相比于Apache,同样的web服务 ...
- AngularJS路由系列(5)-- UI-Router的路由约束、Resolve属性、路由附加数据、路由进入退出事件
本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router约束路由参数● UI-Router的Resolve属性● UI-Router给路由附加数据● UI- ...
- 微软、谷歌、亚马逊、Facebook等硅谷大厂91个开源软件盘点(附下载地址)
开源软件中有大量专家构建的代码,大大节省了开发人员的时间和成本,热衷于开源的大厂们总是能够带给我们新的惊喜.2016年9月GitHub报告显示,GitHub已经有超过 520 万的用户和超 30 万的 ...
- Google、亚马逊、微软 、阿里巴巴开源软件一览
Google.亚马逊.微软 .阿里巴巴开源软件一览 大公司为什么要发布开源项目?一是开源能够帮助他人更快地开发软件,促进世界创新,主要是社会价值层面的考虑.二是开源能够倒逼工程师写出更好的代码.三是开 ...
- Vue系列(一):简介、起步、常用指令、事件和属性、模板、过滤器
一. Vue.js简介 1. Vue.js是什么 Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e 是一个轻量级MVVM(Model-View-ViewModel)框架,和 ...
- Vue系列(三):组件及数据传递、路由、单文件组件、vue-cli脚手架
上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...
- Vue框架(一)——Vue导读、Vue实例(挂载点el、数据data、过滤器filters)、Vue指令(文本指令v-text、事件指令v-on、属性指令v-bind、表单指令v-model)
Vue导读 1.Vue框架 vue是可以独立完成前后端分离式web项目的js框架 三大主流框架之一:Angular.React.Vue vue:结合其他框架优点.轻量级.中文API.数据驱动.双向绑定 ...
随机推荐
- jQuery笔记(1)
jQuery 是一个类库 拥有众多js函数的类库 jQuery 大大简化了js的书写代码,看的舒服,用的爽. jQuery 是一个数组,它能够隐性的遍历. 比如 ${"button" ...
- 两种不同的重置样式方法(normalize.css)
重置样式非常多,凡是一个前端开发人员肯定有一个常用的重置CSS文件并知道如何使用它们.他们是盲目的在做还是知道为什么这么做呢?原因是不同的浏览器对一些元素有不同的默认样式,如果你不处理,在不同的浏览器 ...
- 关于Ubuntu下apt的一些用法及和yum的比较
Fedora和Red Hat有yum安装软件,Ubuntu有apt工具. apt简单的来说,就是给Ubuntu安装软件的一种命令方式. 一.apt的相关文件 /etc/apt/sources.list ...
- SDAU课程练习--problemG(1006)
题目描述 Problem Description The highest building in our city has only one elevator. A request list is m ...
- PAT (Advanced Level) 1063. Set Similarity (25)
读入之后先排序. 询问的时候可以o(m)效率得到答案. #include<cstdio> #include<cstring> #include<cmath> #in ...
- java socket 多线程网络传输多个文件
http://blog.csdn.net/njchenyi/article/details/9072845 java socket 多线程网络传输多个文件 2013-06-10 21:26 3596人 ...
- Codeforces Round #364 (Div. 2) E. Connecting Universities (DFS)
E. Connecting Universities time limit per test 3 seconds memory limit per test 256 megabytes input s ...
- POJ 1185炮兵阵地 (状压DP)
题目链接 POJ 1185 今天艾教留了一大堆线段树,表示做不动了,就补补前面的题.QAQ 这个题,我第一次写还是像前面HDU 2167那样写,发现这次影响第 i 行的还用i-2行那样,那以前的方法就 ...
- springMVC 静态文件 访问
1. 新建web project 2. 导入所需jar包 3. 更改web.xml <?xml version="1.0" encoding="UTF-8" ...
- 2快速掌握OMD
我们已经知道使用ArcGIS Engine开发,也就意味着我们要和接口打交道,ArcGIS Engine中提供的接口和类加起来估计上万,但是用过ArcGIS Engine的人,知道这个数字不为过.Ar ...