AngularJS之内置指令汇总

来源：互联网发布：有哪些搜索算法编辑：程序博客网时间：2024/06/08 05:48

所有以ng前缀开头作为命名空间的指令都是AngularJS提供的内置指令，因此自己开发的指令不要以ng开头。

A、基础ng属性指令

A.1 布尔属性

A.1.1 ng-diabled

使用ng-disabled可以把disabled属性绑定到以下表输入字段上：<input>(text/checkbox/radio/ur/email/submit/number)、<textarea>、<select>、<button>。可以通过其属性值可给元素的disabled属性赋值，当表达式为true时是不可用的，当为flase时是可用的。如：

<input type="text" ng-model="someProperty" placeholder="Type to Enable"><button ng-model="button" ng-disabled="!someProperty">A Button</button>

只有在输入框中输入字段时，按钮才可用。

A.1.2 ng-readonly

通过ng-readonly可以将某个返回值真或假的表达式同是否出现readonly属性进行绑定。如：

<input type="text" ng-model="someProperty"><br/><input type="text" ng-readonly="someProperty" value="Some text here"/>

A.1.3 ng-checked

A.1.4 ng-selected

A.2 类布尔属性：ng-href、ng-src虽然不是标准的HTML布尔属性，但是由于行为相似，所以在AngularJS源码内部是和布尔属性同等对待。他们能有效帮助重构和避免错误，因此在改进代码时强烈建议使用它们来代替href和src属性。

A.2.1 ng-href

当使用当前作用域的属性动态创建URL时，应该使用ng-href来代替href。这里潜在的问题是当用户点击一个由插值动态生成的链接时，如果插值尚未生效，将会跳到错误界面（通常是404），这里如果使用ng-href，AngularJS会等到插值生效后再执行点击链接的行为。

<!doctype html><html ng-app="myApp"><head>  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"></script></head><body>  <!-- Always use ng-href when href includes an {{ expression }} -->  <a ng-href="{{myHref}}">I'm feeling lucky, when I load</a>  <!-- href may not load before user clicks -->  <a href="{{myHref}}">I'm feeling 404</a>  <script>    angular.module('myApp', [])    .run(function($rootScope, $timeout) {      $timeout(function() {        $rootScope.myHref = 'http://google.com';      }, 2000);    })  </script></body></html>

A.2.2 ng-src

AngularJS会告诉浏览器在ng-src对应的表达式生效之前不要加载图像。

<!doctype html><html ng-app="myApp"><head>  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"></script></head><body>  <h1>Wrong Way</h1>  <img src="{{imgSrc}}" />  <h1>Right way</h1>  <img ng-src="{{imgSrc}}" />  <script>    angular.module('myApp', [])    .run(function($rootScope, $timeout) {      $timeout(function() {        $rootScope.imgSrc = 'https://www.google.com/images/srpr/logo11w.png';      }, 2000);    })  </script></body></html>

B、在指令中使用子作用域:ng-app和ng-controller是特殊的指令，因为他们会修改嵌套在它们内部的指令的作用域。ng-app为AngularJS应用创建$rootScope或另外一个ng-controller的作用域为原型创建新的的子作用域。

B.1 ng-app

任何具有ng-app属性的DOM元素将被标记为$rootScope的起始点。$rootScope是作用域的起始点，任何嵌套在ng-app内的指令都会继承它。

B.2 ng-controller

内置指令ng-controller的作用域是为嵌套在其中的指令创建一个子作用域，避免将所有的操作和模型都定义在$rootScopeh 。用这个指令可以在一个DOM元素上放置控制器。

值复制：由于原型继承的关系，修改父级对象中的someModel会同时修改子对象中的值。但反之则不行。

<!doctype html><html ng-app="myApp"><head>  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"></script></head><body>  <div ng-controller="SomeController">    {{ someModel }}    <button ng-click="someAction()">Communicate</button>    <div ng-controller="SomeController">      {{ someModel }}      <button ng-click="childAction()">Communicate</button>    </div>  </div>  <script>    angular.module('myApp', [])    .controller('SomeController', function($scope) {      // create a model      $scope.someModel = 'hello computer';         $scope.someAction = function() {        $scope.someModel = 'hello human, from parent';      };    })    .controller('ChildController', function($scope){      $scope.childAction = function(){        $scope.someModel = 'hello human, from child';      }    });  </script></body></html>

引用复制：如果将某个模型对象设置为字符串，它会通过引用进行共享，因此地子$scope中修改属性也会修改父$scope中的这个属性。无论点击哪个按钮，值都会同步更改。

<!doctype html><html ng-app="myApp"><head>  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"></script></head><body>  <div ng-controller="SomeController">    {{ someModel.someProperty }}    <button ng-click="someAction()">Communicate</button>    <div ng-controller="SomeController">      {{ someModel.someProperty }}      <button ng-click="childAction()">Communicate</button>    </div>  </div>  <script>    angular.module('myApp', [])    .controller('SomeController', function($scope) {      // create a model      $scope.someModel = {        // with a property        someProperty: 'hello computer'      }      // set methods on the $scope itself      $scope.someAction = function() {        $scope.someModel.someProperty = 'hello human, from parent';      };    })    .controller('ChildController', function($scope){      $scope.childAction = function(){        $scope.someModel.someProperty = 'hello human, from child';      }    });  </script></body></html>

B.3 ng-include
使用ng-include时AngularJS会自动创建一个子作用域。如果你想使用某个特定的作用域，例如如myController的作用域，必须在同一个DOM元素上添加ng-controller = "myController"指令，这样当模板加载完毕之后，不会像往常一样从外部作用域继承并创建一个新的子作用域。如：
<div ng-include="/myTemplate.html" ng-controller="myController" ng-init="name = 'World'">Hello {{name}}</div>
B.4 ng-switch
这个指令和ng-switch-when及on="propertyName"一起使用，可以在propertyName发生变化的时候渲染不同指令到视图中，在switch被调用前我们用ng-switch-default来输出默认值。

  <input type="text" ng-model="winner">  <div ng-switch on="winner">      <p ng-switch-default>The Winner Is</p>      <h1 ng-switch-when="Ari">{{winner}}</h1>  </div>

当输入的是Ari时，文本域下面的div会显示出来。
B.5 ng-view
ng-view指令用来设置将被路由管理和放置在HTML中的视图位置。
B.6 ng-if
使用ng-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。如果赋值给ng-if的表达式的值是false，那对应的元素会从DOM中移除，否则对应元素的一个克隆将被重新插入DOM中。它同ng-show和ng-hide指令最本质的区别是，它不是通过CSS显示或隐藏DOM节点，而是真正生成或移除节点。
ng-if重新创建元素时用的是它们编译后的状态。如果ng-if内部的代码加载之后被JQuery修改过，那么当ng-if的表达式为false这个DOM会被移除，表达式再次为true时这个元素及其内部的子元素及其内部的子元素会被重新插入DOM，此时这些元素的状态一般是它们的原始状态，而不是它们上次被移除时的状态。也就是无论用jQuery的.addCass添加了什么类都都不会存在了。

<div ng-if="2 + 2 === 5">    Won't see this DOM node, not even in the source code</div><div ng-if="2 + 2 === 4">    Hi, I do exist</div>

B.7 ng-repeat
ng-repeat用来遍历一个集合或为集合中的每个元素生成一个模板实例。集合中的每个元素都会被赋予自己的模板和作用域。同时每个模板实例的作用域中都会暴露一些特殊的属性（$index,$first,$middle,$last,$even,$odd）

<body>  <ul ng-controller="PeopleController">    <li ng-repeat="person in people" ng-class="{even: !$even, odd: !$odd}">      {{person.name}} lives in {{person.city}}    </li>  </ul>  <script>    angular.module('myApp', [])    .controller('PeopleController', function($scope) {      $scope.people = [        {name: "Ari", city: "San Francisco"},        {name: "Erik", city: "Seattle"}      ];    });  </script></body>

B.8 ng-init
ng-init指令用来在指令被调用时设置内部作用域的初始作用域。

<!doctype html><html ng-app="myApp"><head>  <link rel="stylesheet" href="http://cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"></script></head><body>  <div ng-init="greeting='Hello'; person='World'">    {{greeting}} {{person}}  </div>  <script>    angular.module('myApp', []);  </script></body></html>

B.9 {{}}
{{}}语法是AngularJS内置的模板语法，它会在内部$scope和视图之间创建绑定。基于这个绑定，只要$scope发生改变，视图就会随之自动更新。事实上它也是指令，是ng-bind的简略形式，用这种形式不需要创建新的元素，因此它常被用在行内文本中。在屏幕可视的区域内使用{{}}会导致页面加载时未渲染的元素发生闪烁，用ng-bind可以避免这个问题。

<body ng-init="greeting='Hello World'">{{greeting}}</body>

B.10 ng-bind
可以用ng-bind将内容与元素绑定在一起避免FOUC（未渲染内容闪烁）。内容会被当作子节点渲染到含有ng-bind指令的元素内。

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

B.11 ng-cloak
也可以用ng-bind将内容与元素绑定在一起避免FOUC（未渲染内容闪烁），ng-cloak指令会将内部元素隐藏，直到路由调用对应的页面时才显示出来。
B.12 ng-model
用来将input、select、textarea或处自定义表单控件同包含它们的作用域中的属性进行绑定。

 <input type="text" ng-model="winner">

B.13 ng-bind-template
同ng-bind指令类似，ng-bind-template用来在视图中绑定多个表达式。

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

B.14 ng-show/ng-hide
根据所给表达式的值来显示或隐藏HTML元素。

 <div ng-show="2 + 2 == 5">2 + 2 isn't 5, don't show</div> <div ng-show="2 + 2 == 4">2 + 2 is 4, do show</div> <div ng-hide="2 + 2 == 5">2 + 2 isn't 5, don't hide</div> <div ng-hide="2 + 2 == 4">2 + 2 isn't 5, do hide</div>

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

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

B.16 ng-form
用来在一个表单内部嵌套另一个表单。普通的HTML<form>标签不允许嵌套，但是ng-form可以。这意味着内部所有的子表单都合法时，外部的表单才会合法。这对于用ng-repeat动态创建表单是非常有用的。
下面的CSS类会根据表单的验证状态自动设置：
表单合法时设置ng-valid;
表单不合法时设置ng-invalid;
表单未进行修改时设置ng-priston;
表单进行修改时设置ng-dirty。
Angular不会将表单提交到服务器，除非它指定了action属性。要提交表单时调用哪个JavaScript方法，使用下面两个指令当中的一个。
Ng-submit:在表单元素上使用。
Ng-click:在第一个按钮或submit类型的输入字段上使用。
为了避免处理程序被多次调用，只使用两个指令中的一个。

<style>   input.ng-invalid {     border: 1px solid red;    }   input.ng-valid {     border: 1px solid green;    } </style></head><body> <form name="signup_form"ng-controller="FormController" ng-submit="submitForm()"novalidate>   <div ng-repeat="field in fields"ng-form="signup_form_input">     <input type="text"            name="dynamic_input"            ng-required="field.isRequired"            ng-model="field.name"            placeholder="{{field.placeholder}}" />     <div ng-show="signup_form_input.dynamic_input.$dirty &&signup_form_input.dynamic_input.$invalid">       <span class="error"ng-show="signup_form_input.dynamic_input.$error.required">Thefield is required.</span>     </div>   </div>   <button type="submit"ng-disabled="signup_form.$invalid">Submit All</button> </form> <script>   angular.module('myApp', [])   .controller('FormController', function($scope) {     $scope.fields = [       {placeholder: 'Username', isRequired: true},       {placeholder: 'Password', isRequired: true},       {placeholder: 'Email (optional)', isRequired: false}      ];     $scope.submitForm = function() {       alert("it works!");     };   }); </script>

B.17 ng-click
ng-click用来指定一个元素被点击时调用时调用的方法或表达式。

<divng-controller="CounterController"> <button ng-click="count = count + 1"ng-init="count=0">      Increment   </button>   count: {{count}}   <button ng-click="decrement()">     Decrement   </button> <div> <script>   angular.module('myApp', [])   .controller('CounterController', function($scope) {     $scope.decrement = function() {       $scope.count = $scope.count - 1;     };   }) </script>

B.18 ng-select
ng-select用来将数据同HTML的<select>元素进行绑定。这个指令可以和ng-model以及ng-options指令一同使用。Ng-options的值可以是一个内涵表达式，简单来说就是它可以接受一个数组或对象，并对它们进行循环，将内部的内容提供给select标签内部的选项。它的数据源可以是数组和对象。

<div ng-controller="CityController">   <select ng-model="city" ng-options="city.name for cityin cities">     <option value="">Choose City</option>   </select>   Best City: {{ city.name }} </div> <script>   angular.module('myApp', [])   .controller('CityController', function($scope) {       $scope.cities = [         {name: 'Seattle'},         {name: 'San Francisco'},         {name: 'Chicago'},         {name: 'New York'},         {name: 'Boston'}       ];   }); </script>

B.19 ng-submit
ng-submit用来将表达式同onsubmit事件进行绑定。这个指令会阻止默认行为，除非表单不含有action属性。

<form ng-submit="submit()" ng-controller="FormController">   Enter text and hit enter:   <input type="text" ng-model="person.name"name="person.name" />   <input type="submit" name="person.name"value="Submit" />   <code>people={{people}}</code>   <ul>     <li  ng-repeat="(index,object) in people">{{ object.name }}</li>   </ul> </form> <script>   angular.module('myApp', [])   .controller('FormController', function($scope) {     $scope.person = {       name: null     };     $scope.people = [];     $scope.submit = function() {       if ($scope.person.name) {         $scope.people.push({name: $scope.person.name});         $scope.person.name = '';       }     };   }); </script>

B.20 ng-class
使用ng-class动态设置元素的类，方法是绑定一个代表所有需要添加的类的表达式。重复的类不会添加。当表达式发生改变时，先前添加的类会被移除，新类会被添加。

<style>   .red {     background-color: red;    } </style></head><body><divng-controller="LotteryController"> <div ng-class="{red: x > 5}">   You won! </div> <button ng-click="x = generateNumber()" ng-init="x =0">Draw Number</button> <p>Number is: {{ x }}</p></div> <script>   angular.module('myApp', [])   .controller('LotteryController', function($scope) {     $scope.generateNumber = function() {       return Math.floor((Math.random()*10)+1);     }   }) </script>

B.21 ng-attr-(suffix)
当AngularJS编译DOM时会查找花括号{{}}内的表达式。这些表达式会被自动注册到$watch服务中并更新到$digest循环中，成为它的一部分。
有时候浏览器会对属性进行苛刻的限制。SVG就是一个例子：

<svg>         <circlecx=”{{cx}}”></circle></svg>

运行上面的代码会抛出一个错误，指出有一个非法属性。可以用ng-attr-cx来解决这个问题。即：

<svg>         <circleng-attr-cx=”{{cx}}”></circle></svg>

参考书籍：《AngularJS权威教程》——【美】Ari Lerner著

阅读全文

0 0