AngularJs是一款来自Google的前端JS框架，该框架已经被应用到Google的多款产品中。这款框架最核心的特性有:MVC,模块化，自动化双向数据绑定，语义化标签，依赖注入，等等。AngularJS 不仅仅是一个类库，而是提供了一个完整的框架。它避免了和多个类库交互，需要熟悉多套接口的繁琐工作。它由Google Chrome的开发人员设计，引领着下一代Web应用开发。从现在开始本人逐渐开始从了解并且计划深刻的理解学习angularJs，并且把学习心得一点点的积累下来。
**1，如何自定义标签**index.html
<html ng-app='app'>
<body>
<mike></mike>
</body>
<script src="js/angular.min.js"></script>
<script src="mike.js"></script>
</html> 为了让浏览器能够认识这mike个标签，我们需要使用Angular来定义一个mike指令
（本质上说就是自己来把<mike>这种玩意儿替换成浏览器能识别的那些标准HTML标签）。
mike.js var APP = angular.module('app', []);
APP.directive('mike',function() {
return {
restrict:'E',
template:'<div>Hi angularjs</div>',
replace:true
};
});如果路径没问题的话，用浏览器打开index.html就可以看到 Hi angularjs. 可以看到<mike>这个标签已经被<div>Hi angularjs</div>这个标签替换掉了，这也是以上mike.js代码里面replace:true这行配置的作用使其发生了替换，代码里面的template配置就是我们需要的div标签或者是内容，至于指令restrict:’E’这个配置项的含义，详情请看下面：
E:元素 element <mike></mike> 常用
A:属性 attribute <span mike=””></span> 默认
C:样式 class <span class=”mike”></span> 不常用
M:注释 comment <!—-> 不常用
下面是分别演示的代码：
dir.html
<!doctype html>
<html ng-app="app">
<head>
<meta charset="utf-8"/>
</head>
<body>
<mike></mike>
<div mike></div>
<div class="mike"></div>
<!-- directive:mike -->
<div></div>
</body>
<script src="js/angular.js"></script>
<script src="js/dir.js"></script>
</html>dir.js
var APP = angular.module('app', []);
APP.directive('mike', function() {
return {
restrict: 'AEMC',
template: '<div>Hi angularjs</div>',
replace: true
};
})上面的demo出来的就是页面上显示4个不同的 Hi angularjs
templateUrl可以来替代template,目的是为了能够让显示的内容是来自一个Url而不是像上面一样,这样显示的内容非常的有限，而且会使得字符串累加，页面相当的繁琐.从而可以把模板写到一个独立的HTML文件中。
2,如何处理标签中的子标签
指令的作用是把我们自定义的语义化标签替换成浏览器能够认识的HTML标签。那好，如果我们自定义的标签内部出现了子标签，应该如何去处理呢？很显然，transclude就是用来处理这种情况的。
transclude.html
<html ng-app='app'>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /></head>
<body>
<mike>
<br/>
<span>the first mike</span><br/>
<span>the second mike</span>
<span>the third mike</span>
<p>p 标签显示，这个标签定义在在span里面</p>
<a>a标签是定义在p标签内部，同样可以通过ng-transclude显示</a>
<h>h标签自定义在a标签内部,同样可以显示在页面上面</h>
</mike>
<hr>
<mike>
</mike>
</body>
<script src="js/angular.js"></script>
<script src="js/transclude.js"></script></html> transclude.js var APP = angular.module('app', []);
APP.directive('mike',function() {
return {
restrict: 'E',
template: '<div>Hi angularjs
<span ng-transclude>
<p ng-transclude>
<a ng-transclude>
<h ng-transclude></h>
</a></p></span></div>',
//自定义的标签内部出现了子标签div里面有个span，可以用ng-transclude解决这个问题.
transclude: true
};
}); transclude的作用可以简化地理解成：把<mike>标签替换成我们所编写的HTML模板但是<mike>标签内部的内容Hi angularjs保持不变。指令有时候会嵌套，所以加上transclude指令可以保证每一个指令的内容不会被替换掉。
3，怎样使用templateUrl加载html模板
templateUrl.html
<!doctype html>
<html ng-app="app">
<head>
<meta charset="utf-8"/>
</head>
<body>
<mike></mike>
</body>
<script src="js/angular.js"></script>
<script src="js/templateUrl.js"></script>
</html>templateUrl.js
var APP = angular.module('app', []);
APP.directive('mike', function() {
return {
restrict: 'AEMC',
templateUrl: 'hello.html'
};
})hello.html
<html>
<head>
<meta charset=utf-8/>
</head>
<body><h1>The content from hello.html</h1></body>
</html>页面上显示：The content from hello.html
4，怎样缓存模板，使其可以让其他指令使用
$templateCache.put和get分别可以将模板保存和取出
templateCache.html
<!doctype html>
<html ng-app="app">
<head>
<meta charset="utf-8"/>
</head>
<body>
<mike></mike>
</body>
<script src="js/angular.js"></script>
<script src="js/templateCache.js"></script>
</html>
templateCache.js
var APP = angular.module('app', []);
//注射器加载完所有的模块时，run方法只执行一次
APP.run(function($templateCache){
$templateCache.put("hello1.html","<div>Hi Angularjs</div>")
//angular 内置的templateCache将hello1.html模板缓存起来,可以让多个指令使用它
})
APP.directive('mike', function($templateCache) {
return {
restrict: 'AEMC',
template: $templateCache.get("hello1.html"),
replace:true
}
})hello1.js
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<style>
.id{
width:100px;
height:100px;
background:red;
}
</style>
</head>
<body>
<div class="id">This is the content from hello1.html</div>
</body>
</html>5，指令执行过程
compile和link
compile函数用来对模板自身进行转换，而link函数负责在模型和视图之间进行动态关联；
作用域在链接阶段才会被绑定到编译之后的link函数上面；
compile函数仅仅在编译阶段运行一次，而对于指令的每一个实例，link函数都会执行一次；
compile可以返回preLink和postLink函数，而link函数只会返回postLink函数；
如果需要修改DOM结构，应该在postLink中来做这件事情，如果在preLink中做这件事情会导致错误；
大多数的时候我们只要编写link函数就可以；
link指令，link函数负责在模型和视图之间进行动态关联，下面的demo模拟鼠标滑动，angular加载后台数据
load.html
<html ng-app='app'>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<div ng-controller="ctrl">
<load>滑动鼠标，加载数据</load>
</div>
</body>
<script src="js/angular.js"></script>
<script src="js/load.js"></script>
</html>load.js
var APP = angular.module('app', []);
APP.controller('ctrl',['$scope',function($scope){
$scope.loading = function(){
console.log("loading data,please wait...")
}
}])
APP.directive('load', function() {
return {
restrict: 'AE',
//link函数一般有总共有4个参数
link:function(scope,element,attr){//link函数监听事件，鼠标滑动
element.bind("mouseenter",function(){//给元素绑定事件，当鼠标进入的时候，加载数据loading data，在控制台打印console.log("loading data,please wait...")
scope.loading()//指令调用方法，加载数据
})
}
}
})
也可以使用$apply调用到上面的loading方法：
var APP = angular.module('app', []);
APP.controller('ctrl',['$scope',function($scope){
$scope.loading = function(){
console.log("loading data,please wait...")
}
}])
APP.directive('load', function() {
return {
restrict: 'AE',
//link函数一般有总共有4个参数
link:function(scope,element,attr){//link函数监听事件，鼠标滑动
element.bind("mouseenter",function(){//给元素绑定事件，当鼠标进入的时候，加载数据loading data，在控制台打印console.log("loading data,please wait...")
//scope.loading()//指令调用方法，加载数据
scope.$apply("loading()")
})
}
}
})页面显示如图所示：
如果有多个controller调用多个方法的时候，这个时候就必须在指令中定义属性了，注意link函数中，属性的定义一定是小写的，如果是大写的字母或是单词会报错（loa）:
load.html
<html ng-app='app'>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<div ng-controller="ctrl1">
<load Load="loading1()">滑动鼠标，加载数据1111111</load>
</div>
<div ng-controller="ctrl2">
<load Load="loading2()">滑动鼠标，加载数据2222222</load>
</div>
</body>
<script src="js/angular.js"></script>
<script src="js/load.js"></script>
</html>load.js
var APP = angular.module('app', []);
APP.controller('ctrl1',['$scope',function($scope){
$scope.loading1 = function(){
console.log("loading1 data,please wait...11111111111111111111111")
}
}])
APP.controller('ctrl2',['$scope',function($scope){
$scope.loading2 = function(){
console.log("loading2 data,please wait...222222222222222222222222")
}
}])
APP.directive('load', function() {
return {
restrict: 'AE',
//link函数一般有总共有4个参数
link:function(scope,element,attrs){//link函数监听事件，鼠标滑动
element.bind("mouseenter",function(event){//给元素绑定事件，当鼠标进入的时候，加载数据loading data，在控制台打印console.log("loading data,please wait...")
scope.$apply(attrs.loa)
})
}
}
})
6,怎样实现独立的scope，使得指令绑定互不影响
一般实现双向数据绑定的时候，由于scope没有独立就会出现下面的情况:
scope.html
<html ng-app="app">
<head>
<meta charset="utf-8">
</head>
<body>
<mike></mike>
<mike></mike>
<mike></mike>
<mike></mike>
</body>
<script src="js/angular.js"></script>
<script src="js/scope.js"></script>
</html>scope.js
var APP = angular.module('app', []);
APP.directive('mike',function() {
return {
restrict:'AE',
template:'<div><input type="text" ng-model="username"/>{{username}}</div>',
replace:true
};
});页面显示如下：
为了实现独立的scope，我们需要在scope.js里面加上scope:{},以实现独立绑定,使得双向数据绑定时互补影响
var APP = angular.module('app', []);
APP.directive('mike',function() {
return {
restrict:'AE',
scope:{},//在这个地方加一个独立的scope，可以实现独立绑定,使得双向数据绑定时互补影响
template:'<div><input type="text" ng-model="username"/>{{username}}</div>',
replace:true
};
});页面显示如下:
scope绑定策略
@ 把当前属性作为字符串传递，还可以绑定来自外层scope的值，在属性值中插入{{}}即可
= 与父scope中的属性进行双向绑定
& 传递一个来自父scope的函数，稍后调用.
@：
scope.html
<html ng-app="app">
<head>
<meta charset="utf-8">
</head>
<body>
<div ng-controller="ctrl">
<mike phone="{{msg}}"></mike>
</div>
</body>
<script src="js/angular.js"></script>
<script src="js/scope1.js"></script>
</html>scope.js
var APP = angular.module('app', []);
APP.controller('ctrl',['$scope',function($scope){
$scope.msg = "apple is now very famous for its good looking";
}])
APP.directive("mike",function() {
return {
restrict:'AE',
scope:{
phone:'@'//这里加上一个@,angularjs自动帮助绑定。
},
template:'<div><h1 style="background:yellow;">{{phone}}</h1></div>'
};
});
=：
scope.html
<html ng-app="app">
<head>
<meta charset="utf-8">
</head>
<body>
<div ng-controller="ctrl">
<h2>ctrl</h2>
<input type="text" ng-model="msg"/><br/>
<h2>directive</h2>
<mike phone='msg'></mike>
</div>
</body>
<script src="js/angular.js"></script>
<script src="js/scope1.js"></script>
</html> var APP = angular.module('app', []);
APP.controller('ctrl',['$scope',function($scope){
$scope.msg = "apple";
}])
APP.directive('mike',function() {
return {
restrict:'AE',
scope:{
phone:'='//这里改成=，可以双向数据绑定，可以将phone的内容自动绑定到scope上面的msg上面。
},
template:'<input type="text" ng-model="phone"/>'
}
});页面显示如下图所示：
&:
scope.html
<html ng-app="app">
<head>
<meta charset="utf-8">
<link href="">
</head>
<body>
<div ng-controller="ctrl">
<mike say="saySomething(name)"></mike>
</div>
</body>
<script src="js/angular.js"></script>
<script src="js/scope1.js"></script>
</html>scope.js
var APP = angular.module('app', []);
APP.controller('ctrl',['$scope',function($scope){
$scope.saySomething = function (name){
alert("Hi, "+name);
}
}])
APP.directive('mike',function() {//定义mike指令
return {
restrict:'AE',
scope:{
say:'&'//这里改成&，say自动绑定
},
template:'<input type="text" ng-model="userName"/><br/>'+'<button style="width:40px;height:20px;background:gray;" ng-click="say({name:userName})">Say</button>'//button调用函数
}
});页面显示效果，如下图所示:
7,form表单验证
ng-submit:用来提交动作的处理，在controller里面定义了函数来处理提交后的验证动作。dditionally it prevents the default action (which for form means sending the request to the server and reloading the current page), but only if the form does not contain action, data-action, or x-action attributes.请参考ngSubmit
ng-class:The ngClass directive allows you to dynamically set CSS classes on an HTML element by databinding an expression that represents all classes to be added.一般里面是一个表达式，请参考ngClass
$pristine：是一个boolean值，如果为true，说明user没有和form进行交互，也就是说form没有被修改,参考:$pristine
完整登录代码：
<!doctype html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="css/bootstrap.css"/>//引入bootstrap.css样式文件
</head>
<body>
<div class="panel panel-primary" style="width:700px;margin:90px auto;" ng-controller="ProListCtrl">//在controller.js里面定义一个控制器ProListCtrl，方便angularjs管理界定范围
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<h2 class="text-center">管理员登录系统</h2>
</div>
</div>
<div class="row">
<div class="col-md-12">
<form class="form-horizontal" name="loginForm" role="form" ng-submit="submitForm(loginForm.$valid)" novalidate>//submitForm是在controller里面定义的一个函数，用来验证loginForm提交的。
<div class="form-group" ng-class="{'has-error':loginForm.emailName.$invalid && !loginForm.emailName.$pristine}">//$pristine是一个boolean，提示form中的属性emailName是否被用户修改，True if user has not interacted with the form yet.这里的意思就是说
//emailForm被用户修改且email不是合法的就提示报错。
<!--ng-class="{'has-error':loginForm.emailName.$invalid && !loginForm.emailName.$pristine&&submitted}"确保数据错误只有在提交的时候才会显示-->
<label class="col-md-2 control-label">
用户名：
</label>
<div class="col-md-10">
<input type="email" name="emailName" class="form-control" placeholder="请输入注册邮箱" ng-model="user.email" required>//user是在controller中定义的一个函数，定于email，pwd,和autoLogin的值
<p ng-show="loginForm.emailName.$invalid && !loginForm.emailName.$pristine" class="alert alert-danger">您输入的邮箱地址不符合要求，请重新输入您的登录邮箱。</p>//class="alert alert-danger"是boostrap里面的一个样式，提示危险信息。
</div>
</div>
<div class="form-group" ng-class="{'has-error':loginForm.pwdName.$invalid && !loginForm.pwdName.$pristine}">
<label class="col-md-2 control-label">
密码：
</label>
<div class="col-md-10">
<input type="password" name="pwdName" class="form-control" placeholder="请输入登录密码" ng-model="user.pwd" ng-minlength="6" ng-maxlength="10">//ng-minlength和maxlength是定义密码的最大和最小长度
<!--<p ng-show="loginForm.pwdName.$invalid && !loginForm.pwdName.$pristine" class="help-block">密码不符合要求,且</p>-->
<p ng-show="loginForm.pwdName.$error.minlength" class="alert alert-danger">密码长度不够，请重新输入您的登录密码。</p>//ng-show 如果密码输入不符合要求报错.
<p ng-show="loginForm.pwdName.$error.maxlength" class="alert alert-danger">密码太长，请重新输入您的登录密码。</p>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<div class="checkbox">
<label>
<input type="checkbox" ng-model="user.autoLogin"> Auto Login
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<!--<a class="btn btn-success btn-lg" ng-disabled="loginForm.$invalid">登录</a>-->
<button class="btn btn-success btn-lg" type="submit">登录</button>
<button class="btn btn-default btn-lg" data-toggle="modal" data-target="#mymodal-data" type="button">注册</button>
<!-- 模态弹出窗内容 -->//注册弹出的框的内容也是bootstrap提供的
<div class="modal" id="mymodal-data" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">用户注册:</h4>
</div>
<form ui-sref="prolist({proType:0})" class="form-group">
<div class="modal-body">
<!--<p class="alert alert-success">注册启动成功!</p>-->
<div class="form-group">
<label class="col-md-2 control-label">
用户名：
</label>
<div class="col-md-10">
<input type="text" class="form-control" placeholder="请输入您的注册邮箱。">
</div>
<br/>
</div>
<div class="form-group">
<label class="col-md-2 control-label">
密码：
</label>
<div class="col-md-10">
<input type="text" class="form-control" placeholder="请输入您的注册密码。">
</div>
<br/>
</div>
<div class="form-group">
<label class="col-md-2 control-label">
电话：
</label>
<div class="col-md-10">
<input type="text" class="form-control" placeholder="请输入您的注册电话。">
</div>
<br/>
</div>
<input type="submit" value="提交">
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
<!-- <button class="btn btn-default btn-lg" ng-click="setFormData()">注册</button>-->
<button class="btn btn-success btn-lg" ng-click="reset()">清空</button>//reset()是controller里面定义的一个函数，用来清空form表单
<button class="btn btn-success btn-lg" ng-click="recover()">恢复</button>//recover是controller里面定义的一个函数，用来填充注册的内容
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>页面效果演示:
-邮件地址不符合要求
-密码输入不符合要求
-注册用户框
-登录成功提示框
8,如何自定义指令mikeaction
需求:我想自定义一个指令mikeaction，可以实现text的show和hide
mike.html
<html ng-app="app">
<head>
<meta charset="utf-8"/>
</head>
<body>
<div ng-controller='ctrl'>
<mike mikeaction='title'><!--mikeaction:就是利用angular的等值绑定的策略-->
{{text}}
</mike>
</div>
</body>
<script src="js/angular.js"></script>
<script src="js/expend.js"></script>
</html>mike.js
var APP=angular.module('app', []);
APP.directive('mike', function() {
return {
restrict : 'EA',
replace : true,
transclude : true,
scope : {
title : '=mikeaction'//这里是固定写法,实现等值绑定
},
template : '<div>'
+ '<div class="title" ng-click="click()">{{title}}</div>'
+ '<div class="body" ng-show="showoff" ng-transclude></div>'
+ '</div>',
link : function(scope, element, attrs) {
scope.showMe = false;
scope.click = function() {//click内部方法，内部才能调到
scope.showoff = !scope.showoff;//点击事件，实现收缩
}
}
}
});
APP.controller('ctrl',function($scope) {
$scope.title = 'my name is mike,and I can show and hide';
$scope.text = 'Hi,I can show,can you see me';
});页面显示结果:
点击页面前
点击页面后
9,指令嵌套
需求：我想利用嵌套指令实现点击按钮列表，实现show和hide
mike.html
<html ng-app="app">
<head>
<meta charset="utf-8"/>
<style>
.m1 {
border: 1px solid red;
width: 250px;
}
.m1>.title {
background-color: blue;
color: white;
padding: .1em .3em;
cursor: pointer;
}
.m1>.body {
padding: .1em .3em;
}
</style>
</head>
<body>
<div ng-controller='sctrl'>
<!--这是一个嵌套标签-->
<mk>
<mike class="m1" ng-repeat="mike in mikes" mikeaction="mike.title"><!--mikeaction:就是利用angular的等值绑定的策略定义的指令，根据mikes遍历选好的结果来确定要显示多少个mike-->
{{mike.text}}
</mike>
</mk>
</div>
</body>
<script src="js/angular.js"></script>
<script src="js/expend.js"></script>
</html>mike.js
var APP=angular.module('app', []);
APP.directive('mk', function() {//定义mk指令
return {
restrict : 'EA',
replace : true,
transclude : true,
template : '<div ng-transclude></div>',
controller : function() {
var mikes = [];//定义数组
this.open = function(selected_m) {//对选中项进行angular操作，方便与里面的指令进行交互
angular.forEach(mikes, function(mike) {//angular遍历
if (selected_m!= mike) {
mike.showoff = false;//不显示
}
});
}
this.add = function(mike) {
mikes.push(mike);
}
}
}
});
APP.directive('mike', function() {//定义mike指令
return {
restrict : 'EA',
replace : true,
transclude : true,
require : '^?mk',//require表示mike依赖外面的mk
scope : {
title : '=mikeaction'//等值绑定mikeaction指令
},
template : '<div>'
+ '<div class="title" ng-click="click()">{{title}}</div>'
+ '<div class="body" ng-show="showoff" ng-transclude></div>'
+ '</div>',
link : function(scope, element, attrs, ctrl) {//ctrl是link的第四个参数，可以自定义，这个ctrl可以根据外层的指令mk进行交互
scope.showoff = false;
ctrl.add(scope);//调用外层mkadd指令的函数方法
scope.click = function click() {
scope.showoff = !scope.showoff;
ctrl.open(scope);//调用外层mk指令open方法
}
}
}
});
APP.controller("sctrl",function($scope) {
$scope.mikes = [{
title : 'what is your name？',
text : 'My name is mike,and I like learning AngularJs'
}, {
title : 'Click this and you will find something interesting',
text : 'Interesting one,and Interesting two,what is the interesting three'
}, {
title : 'Last but not least,Do not forget to learn something new everyday,I hope we can grow more rapidly',
text :'I like learning something new'
}];
});页面结果显示:
页面one
页面two
页面three
10,利用angular ui封装的指令实现show和hide
引入控件ui-bootstrap-tpls, 和bootstrap样式文件
accordion.html
<!doctype html>
<html ng-app="app">
<head>
<meta Content-Type="html/text;charset="utf-8">
<link rel="stylesheet" href="framework/bootstrap-3.0.0/css/bootstrap.css">
<script src="framework/angular-1.3.0.14/angular.js"></script>
<script src="framework/ui-bootstrap-tpls-0.11.0.js"></script>
<script src="Accordion.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div ng-controller="ctrl">
<p>
<button class="btn btn-default btn-md" ng-click="status.open = !status.open">点击打开娱乐</button><!--status.open是angular ui包装好的用法-->
<button class="btn btn-default btn-md" ng-click="status.isDisabled = !status.isDisabled">点击控制获取权限(你叫什么名字)</button><!--在js中定义status的状态，status的状态也可以自己定义-->
</p>
<label class="checkbox">
<input type="checkbox" ng-model="oneAtATime">每次只能打开一个
</label>
<accordion close-others="oneAtATime">
<accordion-group heading="你叫什么名字?" is-disabled="status.isDisabled"><!--页面默认显示关闭的-->
我叫 mike.
</accordion-group>
<accordion-group heading="{{group.title}}" ng-repeat="group in groups"><!--从js文件中获取{{group.title}}定义的内容-->
{{group.content}}
</accordion-group>
<accordion-group heading="显示添加商品">
<p>添加商品的细节</p>
<button class="btn btn-default btn-md" ng-click="add()">添加</button>
<div ng-repeat="beer in products">{{beer}}</div>
</accordion-group>
<accordion-group is-open="status.open"><!--默认显示是关闭的-->
<accordion-heading>
娱乐 <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open,'glyphicon-chevron-right': !status.open}"></i>
</accordion-heading>
游戏，动漫，电影，ktv...
</accordion-group>
</accordion>
</div>
</div>
</div>
</div>
</body>
</html>Accordion.js
var APP = angular.module('app', ['ui.bootstrap']);
APP.controller('ctrl', ['$scope',
function($scope) {
$scope.oneAtATime = true;
$scope.groups = [{
title: '饮料',
content: 'beer,flavor,pure water'
}, {
title: '食物',
content: 'bread,rice,meat'
}];
$scope.products = ['beer1', 'beer2', 'beer3'];//定义只有3个元素的数组
$scope.add = function() {
var no = $scope.products.length + 1;//实现每点击一次长度自动加1
$scope.products.push('beer ' + no);
};
// $scope.status = {//status可以自己定义，也可以使用angular ui内部封装定义
//isOpen: true,
//isDisabled: true
// };
}
])
页面显示：
默认页面
点击打开娱乐
点击获取权限-“你叫什么名字”变成灰色，不可选
11,单指令解析
ng-submit和ng-click
ng-submit在上面的form表单提交中已经提到过了，我在这里写了一个小demo来演示ng-submit和ng-click的作用
submit.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta Content-Type="html/text;charset=UTF-8">
<title>ngSubmit demo</title>
</head>
<body>
<form ng-submit="submit()" ng-controller="ctrl"><!--ng-submit是在js中定义的函数，提交form后要做什么动作-->
把mk加到数组mikes里面去:
<input type="text" ng-model="mk" name="mk" /><!--The ngModel directive binds an input,select, textarea (or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive.-->
<input type="submit" value="提交" />
<pre>mikes集合里面的内容：{{mikes}}</pre>
<pre>mk输入的内容: {{mk}}</pre>
</form>
<button ng-click="i = i * 324" ng-init="i=1">
点击增加:
</button>
<span>
每次累乘324:{{i}}
</span>
</body>
<script src="js/angular.js"></script>
<script src="js/submit.js"></script>
</html>submit.js
var APP = angular.module('app', [])
APP.controller('ctrl', ['$scope', function($scope) {
$scope.mikes = [];//定义数组
$scope.mk = '';//将这个mk利用ng-model绑定到html输入框中,设定默认值
$scope.submit = function() {
if ($scope.mk) {
$scope.mikes.push(this.mk);
$scope.mk = '';
}
};
}]);页面样式：
11.1，表单错误验证
需求：表单错误的验证input.$valid，input.$error，$valid，$error.required
form.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta Content-Type="html/text;charset=UTF-8">
<title>ngSubmit demo</title>
<style>
.my-form {
-webkit-transition:all linear 0.5s;
transition:all linear 0.5s;
background: transparent;
}
.my-form.ng-invalid {
background: rgb(0,255,81);
width:700px;
height:50px;
}
</style>
</head>
<body>
<div style="width:700px;height:100px;">
<form name="myForm" ng-controller="ctrl" class="my-form">
输入验证: <input name="input" ng-model="who" required>
<span class="error" ng-show="myForm.input.$error.required">这是必填内容，请重新输入</span><br>
<hr>
<code>用户输入记录 = {{who}}</code><br>
<p>判断是否有用户输入</p>
<code>myForm.input.$valid = {{myForm.input.$valid}}</code><br>
<p>判断用户输入是否有错误出现</p>
<code>myForm.input.$error = {{myForm.input.$error}}</code><br>
<p>判断用户输入form表单是否有效</p>
<code>myForm.$valid = {{myForm.$valid}}</code><br>
<p>判断用户输入是否有错误表单验证</p>
<code>myForm.$error.required = {{!!myForm.$error.required}}</code><br>
</form>
</div>
</body>
<script src="js/angular.js"></script>
<script src="js/form.js"></script>
</html>form.js
var APP = angular.module('app', [])
APP.controller('ctrl', ['$scope', function($scope) {
$scope.who = 'mike';//定义表单的默认输入项
}]);页面显示展示：
当有内容输入的时候：
当没有内容输入的时候:
11.2 input元素相关指令
type=”error” $error.minlength $error.maxlength $error.required
input.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta Content-Type="html/text;charset=UTF-8">
<title>input demo</title>
</head>
<body>
<div ng-controller="ctrl">
<form name="mikeForm">
<label>
姓名:
<input type="text" name="userName" ng-model="user.name" required>
</label>
<div role="alert">
<span class="error" ng-show="mikeForm.userName.$error.required">用户名为必填项，请输入用户名。</span>
</div>
<label>
公司:
<input type="text" name="userCom" ng-model="user.com" ng-minlength="6" ng-maxlength="10">
</label>
<div role="alert">
<span class="error" ng-show="mikeForm.userCom.$error.minlength">公司名字输入太短</span>
<span class="error" ng-show="mikeForm.userCom.$error.maxlength">公司名字输入太长</span>
</div>
</form>
<hr>
<tt>user = {{user}}</tt><br/>
<tt>mikeForm.userName.$valid = {{mikeForm.userName.$valid}}</tt><br/>
<tt>mikeForm.userName.$error = {{mikeForm.userName.$error}}</tt><br/>
<tt>mikeForm.lastName.$valid = {{mikeForm.lastName.$valid}}</tt><br/>
<tt>mikeForm.lastName.$error = {{mikeForm.lastName.$error}}</tt><br/>
<tt>mikeForm.$valid = {{mikeForm.$valid}}</tt><br/>
<tt>mikeForm.$error.required = {{!!mikeForm.$error.required}}</tt><br/>
<tt>mikeForm.$error.minlength = {{!!mikeForm.$error.minlength}}</tt><br/>
<tt>mikeForm.$error.maxlength = {{!!mikeForm.$error.maxlength}}</tt><br/>
</div>
</body>
<script src="js/angular.js"></script>
<script src="js/input.js"></script>
</html>input.js
var APP = angular.module('app', [])
APP.controller('ctrl', ['$scope', function($scope) {
$scope.user = {name: 'mike', com: 'ibm'};
}]);11.3 checkbox相关指令
ng-true-value=”‘YES'” ng-false-value=”‘NO'”
checkbox.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta Content-Type="html/text;charset=UTF-8">
<title>checkBox demo</title>
</head>
<body>
<form name="mikeForm" ng-controller="ctrl">
<label>Value1:
<input type="checkbox" ng-model="checkBox.value1">
</label><br/>
<label>Value2:
<input type="checkbox" ng-model="checkBox.value2" ng-true-value="'YES'" ng-false-value="'NO'">
<!--ng-true-value="'YES'" ng-false-value="'NO'" 是定义checkBox的value值，显示在页面的-->
</label><br/>
<tt>value1 = {{checkBox.value1}}</tt><br/>
<tt>value2 = {{checkBox.value2}}</tt><br/>
</form>
</body>
<script src="js/angular.js"></script>
<script src="js/submit.js"></script>
</html>checkbox.js
var APP = angular.module('app', [])
APP.controller('ctrl', ['$scope', function($scope) {
$scope.checkBox = {//定义默认值
value1 : true,
value2 : 'YES'
};
}]);页面演示效果:
11.4 日期控件
min和max不起作用
input.$error.date验证不起作用
date.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta Content-Type="html/text;charset=UTF-8">
<title>Date demo</title>
</head>
<body>
<form name="mikeForm" ng-controller="ctrl">
<label for="dateInput">Pick a date in 2015:</label>
<input type="date" id="dateInput" name="input" ng-model="mDate.value" placeholder="yyyy-MM-dd" min="2010-01-01" max="2015-12-31" required />
<div role="alert">
<span class="error" ng-show="mikeForm.input.$error.required">您输入日期不符合要求，请重新输入</span>
<!--<span class="error" ng-show="mikeForm.input.$error.date">不是符合要求的日期，请重新输入</span>-->
</div>
<tt>value = {{mDate.value | date: "yyyy/MM/dd"}}</tt><br/>
<tt>mikeForm.input.$valid = {{mikeForm.input.$valid}}</tt><br/>
<tt>mikeForm.input.$error = {{mikeForm.input.$error}}</tt><br/>
<tt>mikeForm.$valid = {{mikeForm.$valid}}</tt><br/>
<tt>mikeForm.$error.required = {{!!mikeForm.$error.required}}</tt><br/>
</form>
</body>
<script src="js/angular.js"></script>
<script src="js/date.js"></script>
</html>date.js
var APP = angular.module('app', [])
APP.controller('ctrl', ['$scope', function($scope) {
$scope.mDate = {
value: new Date()//设定时间
};
}]);页面效果演示:
日期格式报错：
11.5,邮件格式的输入
type="email"
<label>Email:
<input type="email" name="input" ng-model="email.text" required>
</label>11.6 月份的输入
<label for="exampleInput">Pick a month in 2013:</label>
<input id="exampleInput" type="month" name="input" ng-model="example.value"
placeholder="yyyy-MM" min="2013-01" max="2013-12" required />11.7 数值的输入
<label>Number:
<input type="number" name="input" ng-model="example.value"
min="0" max="99" required>11.8 radio 的输入
radio伪代码
$scope.specialValue = {
"id": "12345",
"value": "green"
};
<label>
<input type="radio" ng-model="color.name" ng-value="specialValue">
Green
</label>11.9 正则表达式验证输入
ng-trim=”false”：字符空格控制；
ng-pattern=”example.word”：正则表达式验证输入
validation.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta Content-Type="html/text;charset=UTF-8">
<title>validation demo</title>
</head>
<body>
<form name="myForm" ng-controller="ctrl">
<label>填写一个没有空格的英语单词:
<input type="text" name="input" ng-model="example.text"
ng-pattern="example.word" required ng-trim="false">
</label>
<div role="alert">
<span class="error" ng-show="myForm.input.$error.required">
Required!</span>
<span class="error" ng-show="myForm.input.$error.pattern">
只有没有空格的英文单词才被允许!</span>
</div>
<tt>text = {{example.text}}</tt><br/>
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
<tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
</form>
</body>
<script src="js/angular.js"></script>
<script src="js/validation.js"></script>
</html>validation.js
var APP = angular.module('app', [])
APP.controller('ctrl', ['$scope', function($scope) {
$scope.example = {
text: 'word',
word: /^\s*\w*\s*$/
};
}]);页面演示:
正确输入:
错误输入:
11.10 时间的输入
<label for="exampleInput">Pick a between 8am and 5pm:</label>
<input type="time" id="exampleInput" name="input" ng-model="example.value"
placeholder="HH:mm:ss" min="08:00:00" max="17:00:00" required />11.11 URL 的输入
<label>URL:
<input type="url" name="input" ng-model="url.text" required>
<label>11.12 week的输入
<label>Pick a date between in 2013:
<input id="exampleInput" type="week" name="input" ng-model="example.value"
placeholder="YYYY-W##" min="2012-W32"
max="2013-W52" required />
</label>11.13，ngBind
The ngBind attribute tells Angular to replace the text content of the specified HTML element with the value of a given expression, and to update the text content when the value of that expression changes.ngBind告诉angular去实时替换html中text内容。
ngBind.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta Content-Type="html/text;charset=UTF-8">
<title>ngBind demo</title>
</head>
<body>
<div ng-controller="ctrl">
<label>请输入你的姓名: <input type="text" ng-model="name"></label><br>
Hi,<span ng-bind="name"></span>
</div>
</body>
<script src="js/angular.js"></script>
<script src="js/ngBind.js"></script>
</html>ngBind.js
var APP = angular.module('app', [])
APP.controller('ctrl', ['$scope', function($scope) {
$scope.name = 'AngularJs';//设定默认值
}]);页面显示结果:
aliyun 开发的公共指令
公共头(topbar)
公共导航(navbar)
truncateText(文本省略，处理特殊字符)
placeHolder
loading
wrapper for high charts
listSelector
simpleGrid（repeat,bindonce,searchBar,tableSearch,loading pagination,noDataInfo)
simpleForm
aliyunConsoleSpm
aliyunConsoleAside
numberRange
clipCopy
tableFixed
补充：
模式匹配(正则表达式)
使用ng-pattern=”/PATTERN/”来确保输入能够匹配指定的正则表达式：
<input type="text" ng-pattern="/[a-zA-Z]/" /> url输入匹配
验证输入内容是否是URL，将input的类型设置为 url：
<input type="url" name="homepage" ng-model="user.facebook_url" />大家有问题欢迎进入群讨论:487768805
