angular内置指令

2017-08-09  本文已影响29人  Look_a_Look

0、ng-app&ng-controller 是特殊的指令,因为它们会修改嵌套在它们内部的指令的作用域。
  ng-app为AngularJS应用创建$rootScopeng-controller则会以$rootScope或另外一个ng-controller的作用域为原型创建新的子作用域$scope
  任何具有ng-app属性的DOM元素将被标记为$rootScope的起始点。 任何嵌套在ng-app内的指令都会继承它。

可以在整个文档中只使用一次ng-app(只有一个angularJS应用)。如果需要在一个页面中有多个AngularJS应用,需要手动引导应用

ng-controller的作用是为嵌套在其中的指令创建一个子作用域,避免将所有操作和模型都定义在$rootScope上。ng-controller接受一个AngularJS表达式参数,这个参数是必需的。

①控制器应该尽可能简单,务逻辑应写在服务和指令中
②尽量显式声明了数据模型,例如$scope.vm这样,可以避免作用域嵌套等其它莫名其妙的问题

1、no-showng-hide 通过CSS来控制元素显示隐藏
2、ng-if 通过添加移除控制元素显示隐藏

当一个元素被ng-if从DOM中移除,同它关联的作用域也会被销毁。而且当它重新加入DOM中时,会通过原型继承从它的父作用域生成一个新的作用域。 其元素状态为初始 状态 ,而不是隐藏前的状态

3、ng-switch 这个指令和ng-switch-when及on="propertyName"一起使用,可以在propertyName发生变化时控制显示隐藏

<input type="text" ng-model="person.name"/>
<div ng-switch on="person.name">
     <p ng-switch-default>And the winner is</p>
     <h1 ng-switch-when="Ari">{{ person.name }}</h1>
</div> 

4、ng-disabled 设置是否可用。对以下HTML元素有效

<input> (text、 checkbox、 radio、 number、 url、email、 submit)
<textarea> <select> <button>

5、 ng-readonly设置是否只读。对以下HTML元素有效

<input> (text、 checkbox、 radio、 number、 url、email)
<textarea> <select>

6、ng-checked设置是否选中。对以下HTML元素有效

< checkbox >

7、ng-selected设置是否可用。对以下HTML元素有效

<select >

8、ng-class 当某个变量为true时应用该样式,如下两种用法

ng-class="{'class1': selected1, 'class2': selected2, 'class3': selected3}"
ng-class="{true:'class',false:'class2'}[currentSelected]"

9、ng-style 设置元素的行内样式

ng-style="{'background-color':'{{markColor}}'}"
ng-style="myStyle"

10、ng-repea 循环遍历一个集合生成html模板,每个模板实例的作用域中都会暴露一些特殊的属性

 $index:遍历的进度(0...length-1)
 $first:当元素是遍历的第一个时值为true
 $middle:当元素处于第一个和最后元素之间时值为true
 $last:当元素是遍历的最后一个时值为true
 $even:当$index值是偶数时值为true
 $odd:当$index值是奇数时值为true。

11、ng-option 用来将数据同HTML的<select>元素进行绑定。这个指令可以和ng-model以及ng-selected指令一同使用,构建精细且表现优良的动态表单。
12、ng-form 用来在一个表单内部嵌套另一个表单。普通的HTML <form>标签不允许嵌套,但ng-form可以。下面的CSS类会根据表单的验证状态自动设置:

表单合法时设置ng-valid
表单不合法时设置ng-invlid
表单未进行修改时设置ng-pristion
表单进行过修改时设置ng-dirty。

13、ng-href 当href链接是动态创建时,用来替代默认的href属性
14、ng-src 当src链接是动态创建时,用来替代默认的src属性
15、ng-model 用来将inputselecttext area自定义表单控件同包含它们的作用域中的属性进行绑定。(其他元素ng-model无效)

我们应该始终用ngModel来绑定$scope上一个数据模型内的属性,而不是$scope上的属性,这可以避免在作用域或后代作用域中发生属性覆盖。

16、ng-click 用来指定一个元素被点击时调用的方法或表达式。
17、ng-changeinputselecttext area自定义表单控件输入发生变化时执行,需要和ngModel联合起来使用。
18、ng-submit 用来提交表单
19、ng-init指令用来在指令被调用时设置内部作用域的初始状态。
20、ng-bind 作用同{{ }}一样,可以避免页面闪烁出现未渲染的{{}},还可以在含有{{ }}的元素上使用ng-cloak指令来实现相同效果
21、ng-bind-template同ng-bind指令类似可以在视图中绑定多个表达式。

<div ng-bind-template="{{message}}{{name}}"></div>
     效果等同于
<div ng-cloak>{{message}}{{name}}</div>

22、 使用ng-include 可以加载、编译并包含外部HTML片段到当前的应用中。

<div ng-include="/myTemplateName.html"
     ng-controller="MyController"
     ng-init="name = 'World'">
       Hello {{ name }}
</div> 

23、ng-attr-(suffix) 某些html元素的属性中不允许出现{{}}花括号,需要用此方法代替

<svg>
    <circle cx="{{ cx }}"></circle>  <!-- 报错 -->
</svg> 
    使用以下写法代替
<svg>
    <circle ng-attr-cx="{{ cx }}"><circle>
</svg> 
上一篇 下一篇

猜你喜欢

热点阅读