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.数据驱动.双向绑定 ...
随机推荐
- ural1097 Square Country 2
Square Country 2 Time limit: 1.0 secondMemory limit: 64 MB The Square Parliament of the Square count ...
- Diamond Collector
Diamond Collector 题目描述 Bessie the cow, always a fan of shiny objects, has taken up a hobby of mining ...
- 我的android学习脚步----------- Button 和监听器setonclicklistener
最基本的学习,设置一个按钮并监听实现实时时刻显示 首先XML布局,在layout中的 activity_main.xml中拖一个Button按钮到相应位置 然后在xml文件中做修改 <Rela ...
- PAT (Advanced Level) 1054. The Dominant Color (20)
简单题 #include<cstdio> #include<cstring> #include<cmath> #include<vector> #inc ...
- 一个人的旅行HDU 2066 floyd
一个人的旅行 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Subm ...
- python之路:进阶篇 内置函数
li = [11, 22, 33] news = map( li = [100, 2200, 3300] news = map( [13, 24, 35] [11, 11, 11] [22, 4 ...
- git diff 差异对比
转载原文: http://fsjoy.blog.51cto.com/318484/245465/ 1. 查看当前所有的更改情况.git status 结果有3部分,changes to be comm ...
- HDU 4081 Qin Shi Huang's National Road System 次小生成树变种
Qin Shi Huang's National Road System Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/3 ...
- [iOS]C语言技术视频-02-程序分支结构(if...else)
下载地址: 链接: http://pan.baidu.com/s/1dREc2 密码: egbt
- Inside dependency property
依赖属性的定义,分为3步(以PresentationFramework中的System.Windows.Controls.Button为例) 1. 声明依赖属性 public static read ...