<input type="text" ng-readonly="stopTheWorld" value="stop the world after 3s"/>
.run(function($rootScope,$timeout){
$rootScope.stopTheWorld=false;
$timeout(function(){
$rootScope.stopTheWorld = true;
},3000)
})
ng-checked
这个是给<input type="checkbox" />用的,比如...
复制代码 代码如下:
<input type="checkbox" ng-checked="someProperty" ng-init="someProperty = true" ng-model="someProperty">
ng-selected
给<select>里面的<option>用的,例子:
复制代码 代码如下:
<label>
<input type="checkbox" ng-model="isFullStack">
I'm Full Stack Engineer
</label>
<select>
<option>Front-End</option>
<option>Back-End</option>
<option ng-selected="isFullStack">Full Stack !!!</option>
</select>
ng-show/ng-hide
根据表达式显示/隐藏HTML元素,注意是隐藏,不是从DOM移除,例如:
复制代码 代码如下:
<div ng-show="1+1 == 2">
1+1=2
</div>
<div ng-hide="1+1 == 3">
you can't see me.
</div>
ng-change
不是HTML那套onXXX之类的,而是ng-XXX。
结合ng-model使用,以ng-change为例:
复制代码 代码如下:
<input type="text" ng-model="calc.arg" ng-change="calc.result = calc.arg*2" />
<code>{{ calc.result }}</code>
或者比如ng-options
{{}}
其实这个也是一个指令,也许觉得和ng-bind差不多,但页面渲染略慢时可能会被看到。
另外,{{}}的performance远不如ng-bind,只是用起来很方便。
ng-bind
ng-bind的行为和{{}}差不多,只是我们可以用这个指令来避免FOUC(Flash Of Unrendered Content),也就是未渲染导致的闪烁。
ng-cloak
ng-cloak也可以为我们解决FOUC。 ng-cloak会将内部元素隐藏,直到路由调用对应的页面。
ng-if
如果ng-if中的表达式为false,则对应的元素整个会从DOM中移除而非隐藏,但审查元素时你可以看到表达式变成注释了。
如果相进行隐藏,可以使用ng-hide。
复制代码 代码如下:
<div ng-if="1+1===3">
无法审查到该元素
</div>
<div ng-hide="1+1==2">
可审查
</div>
ng-switch
单独使用没什么意思,下面是例子:
复制代码 代码如下:
<div ng-switch on="1+1">
<p ng-switch-default>0</p>
<p ng-switch-when="1">1</p>
<p ng-switch-when="2">2</p>
<p ng-switch-when="3">3</p>
</div>
ng-repeat
不明白为毛不叫iterate,总之是遍历集合,给每个元素生成模板实例,每个实例的作用域中可以用一些特殊属性,如下:
复制代码 代码如下:
$index
$first
$last
$middle
even
odd
不用特地解释,这些都很容易看出来是干什么的,下面是一个例子:
复制代码 代码如下: