《Angular JS 权威教程》 - 内置指令

一、基础ng指令
1.ng-disable,使用ng-disabled可以把disabled属性绑定到以下表单输入字段上:

<input> ;
 <textarea>;
 <select>;
 <button>

普通HTML,在以下表单控件中只要出现了disable属性就会禁用该控件,而使用ng-disable时只有当属性值为true时才会禁用绑定的控件。

2.与ng-disable类似的还有ng-checked、ng-readonly、ng-selected。

3.ng-href,动态创建url时,应该使用ng-href来代替普通HTML的href,避免动态生成链接时url对应的值未生成而造成404,使用ng-href时,angularJS会等待url对应的值生成后执行响应。

4.与ng-href类似的还有ng-src,用于图片等资源的加载时,先判断资源表达式是否生效才加载对应资源。

二、在指令中使用子作用域
1.ng-app,任何具有ng-app属性的DOM元素将会属于$rootScope作用域中,嵌套在ng-app中的指令都会继续它。

2.ng-controller,为嵌套在其中的指令创建一个新的作用域,避免将所有的操作都定义在$rootScope中。

3.ng-include,加载、编译并包含外部的HTML片断到当前应用中,使用ng-include需要考虑跨域资源共享(Cross-Origin Resoure Sharing,CORS)以及同源原则(Same Origin Policy),以保证引入内容能正常加载。
4. ng-switch ,和ng-switch-when、on=”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>

5.ng-if,根据表达式的值生成或移除DOM元素,ng-if和ng-show、ng-hide指令本质区别是它不是通过css来隐藏或显示元素,而是真正的生成和移除节点,移除时会将其作用域及css之类属性也同时移除。

6.ng-repeate,用于迭代一个集合或为集合中每个元素生成一个模板实例。

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

7.{{}},angularJS内置语法,在内部 scope scope发生变化时与之对应的视图也随之变化。

8.ng-bind,该指令用于避免(Flash Unrendered Content,FOUC), 因为内置{{}}语法的元素不会立即进行渲染,因此,使用ng-bind将内容与元素绑定在一起,内容会被 当作子文本节点渲染到含有ng-bind指令的元素内。

<body ng-init="greeting='HelloWorld'">
    <p ng-bind="greeting"></p>
</body>

9.与ng-bind类似的还是ng-cloak指令,ng-cloak指令会将内部元素隐藏,直到路由调用对应的页面时才显示出来。

<body ng-init="greeting='HelloWorld'">
    <p ng-cloak>{{ greeting }}</p>
</body>

10.ng-bind-template,用于绑定多个表达式。

<div ng-bind-template="{{message}}{{name}}">
</div>

11.ng-model 指令用来将input、select、text area或自定义表单控件同包含它们的作用域中 的属性进行绑定。它可以提供并处理表单验证功能,在元素上设置相关的CSS类(ng-valid、 ng-invalid等),并负责在父表单中注册控件。
我们应该始终用ngModel来绑定 scope, scope上的属性, 这可以避免在作用域或后代作用域中发生属性覆盖。
例如:

 <input type="text" ng-model="modelName.someProperty" />

12.ng-change,这个指令会在表单输入发生变化时计算给定表达式的值。因为要处理表单输入,这个指令要 和ngModel联合起来使用。

<div ng-controller="EquationController">
    <input type="text" ng-model="equation.x" ng-change="change()" />
    <code>{{ equation.output }}</code>
</div>
angular.module('myApp',[]) .controller('EquationController',function($scope) {
    $scope.equation = {};
    $scope.change = function() {
        $scope.equation.output = parseInt($scope.equation.x) + 2;
    }; 
});

13.ng-attr-(suffix),当AngularJS编译DOM时会查找花括号{{ some expression }}内的表达式。这些表达式会 被自动注册到 watch digest循环中,成为它的一部分,有时浏览器会对属性会进行很苛刻的限制。SVG就是一个例子:

<svg>
    <circle cx="{{ cx }}"></circle>
</svg>

运行上面的代码会抛出一个错误,指出我们有一个非法属性。可以用ng-attr-cx来解决这 个问题。注意,cx位于这个名称的尾部。在这个属性中,通过用{{ }}来写表达式,达到前面提 到的目的。

<svg>
         <circle ng-attr-cx="{{ cx }}"><circle>
</svg>
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值