Angular指令
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Angular指令相关的知识，希望对你有一定的参考价值。
基础Angular指令
angularJS提供了一系列的基础ng指令，这些指令可以在DOM元素上执行标准的T/F设置，或页面的准确性加载
ng-href；
ng-src；
ng-disabled；
ng-checked；
ng-readonly；
ng-selected；
ng-class；
ng-style。
相对简单，不过多陈述。
指令与作用域
$rootScope是全局变量，这里我们就用一个简单的实例介绍，不做多解释。在mycontroler2中，我们能访问rootpropValue，但不能访问propValue
<!doctype html> <html> <head> <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> </head> <body> <div ng-app="myApp"> <div ng-controller=‘mycontroler‘> rootPropValue:{{rootpropValue}} propValue:{{propValue}} <button ng-click=‘myAction()‘>button</button> </div> <div ng-controller=‘mycontroler2‘> rootPropValue:{{rootpropValue}} propValue:{{propValue||"null"}} </div> </div> <script type="text/javascript" src="controller.js"></script> </body> </html>
var app=angular.module("myApp",[]); app.controller(‘mycontroler‘,function($rootScope,$scope){ $rootScope.rootpropValue="rootScope"; $scope.propValue="defualt value"; $scope.myAction=function(){ $scope.propValue="action value"; } }); app.controller("mycontroler2",function($scope){ });
下面，我们着重说一下父子控制器之间的控制，我们在父子控制器$scope对象中同时控制相同属性值，看效果如下：
<!doctype html> <html> <head> <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> </head> <body> <div ng-app="myApp"> <div ng-controller=‘mycontroler‘> propValue:{{propValue}} <button ng-click=‘myAction()‘>button</button> <div ng-controller=‘mycontroler2‘> propValue:{{propValue}} <button ng-click="myAction2()">button 2</button> </div> </div> </div> <script type="text/javascript" src="controller.js"></script> </body> </html>
var app=angular.module("myApp",[]); app.controller(‘mycontroler‘,function($scope){ $scope.propValue="defualt value"; $scope.myAction=function(){ $scope.propValue="mycontroler‘s value"; } }); app.controller("mycontroler2",function($scope){ $scope.myAction2=function(){ $scope.propValue="mycontroler2‘s value"; } });
由于原型继承的关系，修改父级对象中的someBareValue会同时修改子对象中的值，但反之则不行。这个例子充分说明了子控制器是复制而非引用propValue
JavaScript对象要么是值复制要么是引用复制。字符串、数字和布尔型变量是值复制。数组、对象和函数则是引用复制。
我们在看下面这个例子，当我们通过一个对象进行传递，看效果：
<!doctype html> <html> <head> <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> </head> <body> <div ng-app="myApp"> <div ng-controller=‘mycontroler‘> propValue:{{mymode.propValue|| ‘null‘}} <button ng-click=‘myAction()‘>button</button> <div ng-controller=‘mycontroler2‘> propValue:{{mymode.propValue|| ‘null‘}} <button ng-click="myAction2()">button 2</button> </div> </div> </div> <script type="text/javascript" src="controller.js"></script> </body> </html>
var app=angular.module("myApp",[]); app.controller(‘mycontroler‘,function($scope){ $scope.mymode={propValue:"defualt value"}; $scope.myAction=function(){ $scope.mymode.propValue="mycontroler‘s value"; } }); app.controller("mycontroler2",function($scope){ $scope.myAction2=function(){ $scope.mymode.propValue="mycontroler2‘s value"; } });
我们会发现，此时父子控制器中的mymode对象下的propValue是同时变化的。
ng-switch:这个指令和ng-switch-when及on="propertyName"一起使用。switch被调用之前我们用ng-switch-default来输出默认值。
<input type="text" ng-model="person.name"/> <div ng-switch on="person.name"> <p ng-switch-default>输入“yang”看我的变化</p> <h1 ng-switch-when="yang">{{ person.name }}</h1> </div>
ng-if:使用ng-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。（注意它是控制DOM是否真实存在，并非控制显隐性）
<div ng-if="2+2===5"> 不会再DOM中呈现 </div> <div ng-if="2+2===4"> 会显示在DOM中 </div>
ng-repeat:遍历一个集合或为集合中的每个元素生成一个模板实例。属性包括：
? $index：遍历的进度（0...length-1）。
? $first：当元素是遍历的第一个时值为true。
? $middle：当元素处于第一个和最后元素之间时值为true。
? $last：当元素是遍历的最后一个时值为true。
? $even：当$index值是偶数时值为true。
? $odd：当$index值是奇数时值为true。
<!doctype html> <html> <head> <script src="https://code.angularjs.org/1.2.6/angular.min.js"></script> <style type="text/css"> .odd{ background-color: blue; } .even{ background-color: red; } </style> </head> <body> <div ng-app="myApp"> <ul ng-controller="mycontroler"> <li ng-repeat="person in people" ng-class="{odd:!$odd,even:!$even}"> {{person.name}} lives in {{person.city}} first:{{$first}} and last:{{$last}} and middle:{{$middle}} and index :{{ $index }} odd:{{$odd}} even:{{$even}} and class is {{ {odd:!$odd,even:!$even}| json}} </li> <ul> </div> <script type="text/javascript" src="controller.js"></script> </body> </html>
var app=angular.module("myApp",[]); app.controller("mycontroler",function($scope){ $scope.people=[ {name:‘yang‘,city:"beijing"}, {name:‘gui‘,city:"nanning"}, {name:‘yang2‘,city:"nanjing"}, {name:‘lin‘,city:"beijing"} ]; });
ng-bind：类似于{{}} 可以绑定元素。HTML加载含有{{ }}语法的元素后并不会立刻渲染它们，导致未渲染内容闪烁，可以用ng-bind将内容同元素绑定在一起避免。
<div ng-init="greeting=‘HelloWorld‘"> <p ng-bind="greeting"></p> </div>
ng-cloak：避免未渲染元素闪烁，还可以在含有{{ }}的元素上使用ng-cloak。
<div ng-init="greeting=‘HelloWorld‘"> <p ng-cloak>{{ greeting }}</p> </div>
ng-form：用来在一个表单内部嵌套另一个表单。ng-form可以嵌套，内部所有的子表单都合法时，外部的表单才会合法。Angular不会将表单提交到服务器，除非它指定了action属性。
下面的CSS类会根据表单的验证状态自动设置：
? 表单合法时设置ng-valid；
? 表单不合法时设置ng-invlid；
? 表单未进行修改时设置ng-pristion；
? 表单进行过修改时设置ng-dirty。
<!doctype html> <html> <head> <script src="https://code.angularjs.org/1.2.6/angular.min.js"></script> <style type="text/css"> input.ng-invalid { border: 1px solid red; } input.ng-valid { border: 1px solid green; } </style> </head> <body ng-app="myApp"> <form name="signup_form" ng-controller="FormController" ng-submit="submitForm()" novalidate> <div ng-repeat="field in fields" ng-form="signup_form"> <input type=‘text‘ name=‘dynamic_input_{{field.fieldName}}‘ ng-required="field.isRequired" ng-model="field.name" placeholder="{{field.placeholder}}" /> {{field.name}} <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"> The field is required. </span> </div> </div> <button type="submit" ng-disabled="signup_form.$invalid"> Submit All </button> </form> <script type="text/javascript" src="controller.js"></script> </body> </html>
var app=angular.module("myApp",[]); app.controller("FormController",function($scope){ $scope.fields=[ {fieldName:"userName", "placeholder":"foruserName",isRequired:true}, {fieldName:"password", "placeholder":"forpassword",isRequired:true}, {fieldName:"email", "placeholder":"foremail",isRequired:false} ]; $scope.submitForm=function(){ alert("form submit") }; })
使用ng-if指令可以完全根据表达式的值在DOM中生成或移除一个元素
以上是关于Angular指令的主要内容，如果未能解决你的问题，请参考以下文章
Angular 指令 - 何时以及如何使用编译、控制器、预链接和后链接 [关闭]