指令
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);
};
});

angularJS 指令一的更多相关文章

  1. AngularJS指令

    1. AngularJS指令的特点: AngularJS通过被称为指令的新属性来扩展HTML,指令的前缀为ng-. AngularJS通过内置的指令来为应用添加功能. AngularJS允许你自定义指 ...

  2. angularjs指令参数transclude

    angularjs指令参数transclude transclude翻译为嵌入,和之前看到的vue中的slots作用差不多,目的是将指令元素的子内容嵌入到指令的模板中 定义指令 <div sid ...

  3. angularjs 指令—— 绑定策略（@、=、&）

    angularjs 指令—— 绑定策略(@.=.&) 引入主题背景:angular 的指令配置中的template可以直接使用硬编码写相应的代码,不过也可以根据变量,进行动态更新.那么需要用到 ...

  4. AngularJS 指令

    AngularJS 指令 AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. ng-app 指令 ng-app 指令定义了 AngularJS 应用程序的 根元素. ng-app 指 ...

  5. angularjs指令(二)

    最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方.   Angularjs指令定义的API AngularJs的指令定义大致如下 angula ...

  6. angularJs指令执行的机制==大概的三个阶段

    第一阶段:加载阶段 angularJs要运行的话,需要去等待angular.js加载完成,加载完之后呢,angular就会去查找到ng-app这个指令,ng-app在每个应用里面只能出现一次, 它也就 ...

  7. AngularJS学习笔记二:AngularJS指令

    AngularJS 指令: AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 几个常用 指令: ng-app 指令 ...

  8. AngularJs指令（一）

    AngularJs应用现在越来越流行了,谷歌都与微软合作支持AngularJS2.0,这是要逆天了,说明AngularJs将来大势所趋.最近想跳槽,又重新拾起了AngluarJs(之前由于缺少项目应用 ...

  9. 【转】angularjs指令中的compile与link函数详解

    这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下   通常大家在 ...

  10. AngularJS指令进阶 – ngModelController详解

    AngularJS指令进阶 – ngModelController详解 在自定义Angular指令时,其中有一个叫做require的字段,这个字段的作用是用于指令之间的相互交流.举个简单的例子,假如我 ...

随机推荐

  1. [转]Delphi中，让程序只运行一次的方法

    program onlyRunOne; uses Forms,Windows,SysUtils, Dialogs, Unit1 in 'Unit1.pas' {Form1}; {$R *.res} v ...

  2. java通过移位转16进制

    public class Main { public static void main(String []args) { Main main = new Main(); System.out.prin ...

  3. Base64的用法

    如果要对一些图片进行保存,把他的文件名变成乱码,不让用户把他删掉,可以用Base64把他删掉用法如下: //获取访问图片的路径 String path=editText.getText().toStr ...

  4. servlet从xml提取数据登陆

    在xml文档下可以设置参数的初始值,在这里把他当成了数据库在用 <servlet> <description>This is the description of my J2E ...

  5. Android 学习手札（备注）

    1.在Android 应用程序中不能使用System.out.println(..)来输出信息,而要使用Log类中的静态方法输出调试信息. Log.d("onStart", &qu ...

  6. 3 - testng.xml

    TestNG的调用有以下几种方式: testng.xml ant 命令行 这部分主要介绍testng.xml的格式. 当前testng.xml的DTD(文档类型定义(Document Type Def ...

  7. centos 安装vnc服务

    1.安装tigervnc-server yum install tigervnc-server 2.启动vnc服务 vncserver:1 [错误提示待解决bad display name " ...

  8. U盘美化（更换U盘logo和页面背景软件）

    U盘内新建txt文本后,输入 [autorun] ICON=ooopic_1459309050.ico 保存的文件名包括后缀更改为autorun.inf 必须为icon图标

  9. Javascript闭包函数快速上手

    闭包函数是什么?在开始学习的闭包的时候,大家很能都比较难理解.就从他的官方解释来说,都是比较概念化的. 不过我们也还是从闭包的含义出发. 闭包是指函数有自由独立的变量.换句话说,定义在闭包中的函数可以 ...

  10. 搜索所有的路径-矩阵运算-暴力-ACM

    给定一个n*n整数矩阵,定义对I行的SHIFT操作( 0 <= i < n ),是将第I行所有元素都右移一位,最右边的移到最左边. 你可以对任意行进行任意次SHIFT操作,使得: max0 ...