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

最新推荐文章于 2018-10-12 10:13:01 发布

xxcbsha

最新推荐文章于 2018-10-12 10:13:01 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/xxcbsha/article/details/51187269

版权

一、基础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>

xxcbsha

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《Angular JS 权威教程》 - 内置指令

一、基础ng指令 1.ng-disable，使用ng-disabled可以把disabled属性绑定到以下表单输入字段上: <input> ; <textarea>; <select>; <button>普通HTML，在以下表单控件中只要出现了disable属性就会禁用该控件，而使用ng-disable时只有当属性值为true时才会禁用绑定的控件。2.与ng-disable类似的还有
复制链接

扫一扫