标签：
指令
1.指令本质上就是AngularJS拓展具有自定义功能的HTML元素的途径。
通过自定义元素来创建指令，如：<my-directive></my-directive>
.directive(‘myDirective‘,function(){
return{
restrict:‘E‘,
replace:true, //此句可不加
template:‘<a href="http://baidu.com">clickMe</a>‘
};
});
结果：clickMe点击后跳转到百度页面
其中，restrict告诉AngularJS在编译HTML时用哪种声明格式来匹配指令定义，可以同时指定一个或多个格式，主要有元素(E)、属性(A)、类(C)和注释(M)，绝大部分情况下使用A，因为有较好的跨浏览器兼容性
replace方法会用自定义元素取代指令声明，而不是嵌套在其内部。
2.内置指令
(1)布尔属性
当这个属性出现时，属性值就为true，不出现就为false。在AngularJS中使用动态数据绑定时，不能简单的将属性值设置为true或false，通过运算表达式的值来决定在目标元素上是插入还是移除对应的属性
a.ng-disabled
使用ng-disabled可以把disabled属性绑定到以下表单输入字段上：
<input>(text,checkbox,radio,number,url,email,submit) <textarea> <select> <button>
如：<input type="text" ng-model="property" >
<button ng-disabled="!property">aButton</button>
按钮一直会禁用，直到用户在文本字段中输入内容。
b.ng-readonly
<input type="text" ng-model="myproperty" >
<input type="text" ng-readonly="myproperty" value="some text here" />
$scope.myproperty="";
当input中输入值后，第二个Input值为只读
c.ng-checked
<label>someproperty={{someProperty}}</label>
<input type="checkbox" ng-checked="someProperty" ng-init="someProperty=true" ng-model="someProperty" />
ng-init将someProperty初始化为true,即ng-checked为true,someproperty=true,即checkbox已经选中
d.ng-selected
对是否出现option标签的selected属性进行绑定
<label>Select two Fish:</label>
<input type="checkbox" ng-model="isTwoFish"><br />
<select>
<option>one Fish</option>
<option ng-selected="isTwoFish">Two Fish</option>
</select>
将checkbox点击后会自动选上Two Fish
(2)类布尔属性
a.ng-href
当使用当前作用域中的属性动态创建URL时，应用ng-href代替href
有个潜在问题是当用户点击一个由插值动态生成的链接时，如果插值未生效，就会跳转到错误的页面
b.ng-src
浏览器在ng-src对应的表达式生效之前不会加载图像
<body ng-app="myapp">
<h1>Rightway</h1>
<img ng-src="{{imgSrc}}" />
</body>
angular.module("myapp",[])
.run(function($rootScope,$timeout){
$timeout(function(){
$rootScope.imgSrc=‘360反馈意见截图17060225202456.png‘;
},2000);
});
3.在指令中使用子作用域
ng-app和ng-controller是特殊的指令，因为它们会修改嵌套在它们内部的指令的作用域
(1)ng-app
任何具有ng-app属性的DOM元素将被标记为$rootscope的起始点
$rootscope是作用域链的起始点，任何嵌套在ng-app内的指令都要继承它，可以通过run方法来访问$rootscope
(2)ng-controller
为嵌套在其中的指令创建一个子作用域，避免将所有操作和模型都定义在$rootScope上
$scope对象的职责是承载DOM中指令所共享的操作和模型，模型指的是$scope上保存的包含瞬时状态数据的javascript对象，持久化状态的数据应该保存到服务中。
<body ng-app="myapp">
<div ng-controller="SomeController">
{{someBareValue}}
<button ng-click="someAction()">
Communicate to child
</button>
<div ng-controller="ChildController">
{{someBareValue}}
<button ng-click="childAction()">
Communicate to parent
</button>
</div>
</div>
</body>
angular.module("myapp",[])
.controller("SomeController",function($scope){
$scope.someBareValue="hello computer";
$scope.someAction=function(){
$scope.someBareValue="hello human,from parent";
};
})
.controller("ChildController",function($scope){
$scope.childAction=function(){
$scope.someBareValue="hello human,form child";
};
});
hello computer
Communicate to child //实际效果为button
hello computer
Communicate to parent //实际效果为button
点击父button，两个值都为hello human,from parent，再点击子button，子button的那块显示hello human,form child，导致两次值不一样。
实际开发中采用以下方法保持数据的一致性：
<body ng-app="myapp">
<div ng-controller="SomeController">
{{someModel.someValue}}
<button ng-click="someAction()">
Communicate to child
</button>
<div ng-controller="ChildController">
{{someModel.someValue}}
<button ng-click="childAction()">
Communicate to parent
</button>
</div>
</div>
</body>
angular.module("myapp",[])
.controller("SomeController",function($scope){
$scope.someModel={
someValue:‘hello computer‘
}
$scope.someAction=function(){
$scope.someModel.someValue="hello human,from parent";
};
})
.controller("ChildController",function($scope){
$scope.childAction=function(){
$scope.someModel.someValue="hello human,form child";
};
});
点击Communicate to child，结果都为hello human,from parent，点击Communicate to parent ，结果都为hello human,from parent
原因：JS对象中，字符串、数字和布尔型变量是值复制，而数组、对象和函数使引用复制。由于原型继承的关系，修改父级对象中的someBareValue会同时修改子对象中的值，但是反之就不行。而如果将模型对象的某个属性设置为字符串，就可以通过引用进行共享，在子$scope中修改属性也会修改父$scope中的属性。
(3)ng-include
可以加载、编译并包含外部HTML片段到当前的应用中，此时会自动创建一个子作用域，可以在同一个DOM元素上添加一个ng-controller指令。
<div ng-include="/myTemp.html" ng-controller="myCtrl" ng-init="name=‘world‘">
Hello {{name}}
</div>
(4)ng-switch
这个指令要与ng-switch-when及on="propertyName"一起使用
<div ng-controller="myCtrl">
<select ng-model="selection" ng-options="item for item in items">
</select>
<div ng-switch on="selection">
<div ng-switch-when="settings">Settings div</div>
<div ng-switch-when="home">home div</div>
<div ng-switch-default="other">default</div>
</div>
</div>
angular.module(‘myapp‘,[])
.controller(‘myCtrl‘, function($scope) {
$scope.items=[‘settings‘,‘home‘,‘other‘];
$scope.selection=$scope.items[0];
});
(5)ng-view
用来设置将被路由管理和放置在HTML中的视图的位置
(6)ng-if
可以根据表达式的值在DOM中生成或移除一个元素。当ng-if的表达式为false时，这个DOM元素会被移除，表达式再次为true时这个元素及其内部的子元素会被重新载入DOM，此时的状态会是它们的原始状态，而不是上次被移除时的状态。
(7)ng-repeat
用来遍历一个集合或为集合中的每个元素生成一个模板实例，主要有以下用法：
$index 遍历的进度 $first 当元素是遍历的第一个值时为true
$last $middle $even(index为偶数) $odd(index为奇数)
<body ng-app="myapp" ng-controller="ctrl01">
<div style="padding: 10px;font-weight: bold;">地址管理</div>
<ul>
<li ng-repeat="a in list">
<h4>{{$index+1+"."+a.address+$first}}</h4>
</li>
</ul>
</body>
angular.module("myapp",[])
.controller(‘ctrl01‘,function($scope){
$scope.list=[
{id:1,address:‘莲花路1号‘},
{id:2,address:‘建设路3号‘},
{id:3,address:‘兴化路7号‘},
{id:4,address:‘北京鸟巢‘}
];
})
(8){{}}
是AngularJS内置的模板语法，实际上也是指令，是ng-bind的简略形式。在屏幕可视的区域使用{{}}会导致页面加载时未渲染的元素发生闪烁，使用ng-bind可以避免这个问题
(9)ng-bind
<body ng-init="greeting=‘helloWorld‘">
<p ng-bind="greeting"></p>
</body>
(10)ng-cloak
也可以避免未渲染元素闪烁，会将内部元素隐藏，直到路由调用对应的页面时才显示出来
<body ng-init="greeting=‘helloWorld‘">
<p ng-cloak>{{greeting}}</p>
</body>
(11)ng-bind-template
可以在视图中绑定多个表达式
<div ng-bind-template="{{message}}{{name}}"></div>
(12)ng-model
(13)ng-show/ng-hide
(14)ng-change
<body ng-app="myapp">
<div ng-controller="EquationController">
<input type="text" ng-model="equation.x" ng-change="change()" />
<code>{{equation.output}}</code>
</div>
</body>
angular.module("myapp",[])
.controller("EquationController",function($scope){
$scope.equation={};
$scope.change=function(){
$scope.equation.output=parseInt($scope.equation.x)+2;
};
})
(15)ng-form
用来在一个表单内部嵌套另一个表单，这就意味着内部所有的子表单都合法时，外部的表单才会合法。
不能通过字符插值来输入元素动态的生成name属性，所有需要将ng-form指令内每组重复的输入字段都包含在一个外部表单元素内。可以使用ng-repeat动态创建表单
CSS类会根据表单的验证状态自动设置：
合法时设置：ng-valid 不合法时设置：ng-invalid
未修改时设置：ng-prition 修改时设置：ng-dirty
指定表单提交时使用下面两个指令中的一个：
ng-submit ng-click
使用ng-loop来遍历从服务器取回的所有数据，由于不能动态生成name属性，又需要这个属性做验证，所以在循环的过程中会为每一个字段都生成一个新表单。
例：
<html ng-app="myapp">
<head>
<meta charset="utf-8" />
<title></title>
<style>
input.ng-invalid{
border: 1px solid red;
}
input.ng-valid{
border: 1px solid green;
}
</style>
</head>
<body>
<form name="form" ng-controller="FormController" ng-submit="submitForm()" novalidate>
<div ng-repeat="field in fields" ng-form="form_input">
<input type="text" name="dynamic_input" ng-required="field.isRequired" ng-model="field.name"
placeholder="{{field.placeholder}}" />
<div ng-show="form_input.dynamic_input.$dirty && form_input.dynamic_input.$invalid">
<span class="error" ng-show="form_input.dynamic_input.$error.required">The field is required.</span>
</div>
</div>
<button type="submit" ng-disabled="form.$invalid">Submit All</button>
</form>
</body>
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!");
};
});
(16)ng-click
<body>
<div ng-controller="CounterCtrl">
<button ng-click="count=count+1" ng-init="count=0">
Increment
</button>
count:{{count}}
<button ng-click="decrement()">Decrement</button>
</div>
</body>
angular.module(‘myapp‘,[])
.controller("CounterCtrl",function($scope){
$scope.decrement=function(){
$scope.count=$scope.count-1;
};
})
两个button，点击Increment加1，点击Decrement减1
(17)ng-select
将数据同HTML的<select>元素进行绑定，可以和ng-model以及ng-options指令一同使用。
ng-options的值可以是一个内涵表达式，也就是说可以接受一个数组或对象，并对它们进行循环，将内部的内容提供给select标签内部的选项
<body>
<div ng-controller="CityController">
<select ng-model="city" ng-options="city.name for city in cities">
</select>
Best City: {{ city.name }}
</div>
</body>
angular.module(‘myapp‘,[])
.controller(‘CityController‘, function($scope) {
$scope.cities = [
{name: ‘Seattle‘},
{name: ‘San Francisco‘},
{name: ‘Chicago‘},
{name: ‘New York‘},
{name: ‘Boston‘}
];
});
(18)ng-submit
(19)ng-class
动态设置元素的类，方法是绑定一个代表所有需要添加的类的表达式，重复的类不会添加。当表达式发生变化，先前添加的类会被移除，新类会被添加
<style>
.red{
background-color: red;
}
</style>
<body>
<div ng-controller="LotteryController">
<div ng-class="{red:x>5}" ng-if="x>5">You won!</div>
<button ng-click="x=generateNumber()" ng-init="x=0">
Drew Number!
</button>
<p>Number is:{{x}}</p>
</div>
</body>
angular.module(‘myapp‘,[])
.controller(‘LotteryController‘, function($scope) {
$scope.generateNumber=function(){
return Math.floor((Math.random()*10)+1);
};
});
标签：
原文地址：http://www.cnblogs.com/lyy-2016/p/5693417.html
