基本操作
之前的学习基本了解了AngularJS的常用方法，下来就继续学习吧。
创建自定义的指令
除了内置指令，我们可以创建自定义指令。通过.directive函数来添加。
|
1
2
3
|
<div change-data> 11</div> |
|
1
2
3
4
5
6
|
//自定义指令 app.directive("changeData",function(){ return { template:"<h1>这个我自定义的！</h1>" }; }); |
需要注意：要是使用驼峰法命名指令，例changeData,在使用的时候必须以-分割。change-data就像上面的那个一样;这里面return { }中不只一个返回值，按照教程上面还有很多。
验证输入
邮箱验证：这里的验证很简单，就是把类型定义为email就行。验证出错显示是在后面，先是隐藏起来，等到出错在显示出来。
|
1
2
3
4
5
|
<form name="myForm"> Email: <input type="email" name="myAddress" ng-model="text"/> <span ng-show="myForm.myAddress.$error.email">这是一个很神奇的报错</span></form> |
我们看代码的截图就可以发现。
这里ng-show里面是指定验证错误的地方。且提示信息会在ng-show属性返回true时显示。
应用状态
可以查看值是否被修改。具体的状态值有invalid(看值是否合法)，dirty(看值是否修改过),touched(看值是否通过触屏点击),error(看是否有误)
|
1
2
3
4
5
6
7
8
9
|
<form name="myForm" ng-init="text='mr-zhanghui@qq.com'"> Email: <input type="email" name="myAddress" ng-model="text" required/> <span ng-show="myForm.myAddress.$error.email">这是一个很神奇的报错</span> <h1>状态值</h1> valid:-----{{myForm.myAddress.$valid}} --- //值合法为true<br/> dirty:-----{{myForm.myAddress.$dirty}} ---//值是否改变为true<br/> touched:---{{myForm.myAddress.$touched}} ---//是否通过触屏为true<br/></form> |
修改css类
ng-model指令基于它们的状态为HTML元素提供CSS类通过在style类中的调用.ng-invalid就可以修改其CSS属性
|
1
2
3
4
5
|
<style> input.ng-invalid{ }</style> |
AngularJS Scope(作用域)
Scope在视图和控制器之间起作用，它是一个对象，有可用的方法和属性。一般应用在视图和控制器上。所有的应用都有一个$rootScope,它可以作用于整个应用中，是各个controller中scope的桥梁。使用rootScope定义的值可以在各个controller中取得。
|
1
2
3
4
|
app.controller("myCtrl",function($scope,$rootScope){ $scope.namess=['11','22','33']; $rootScope.rootPerson="我叫阿辉"; }); |
|
1
2
3
4
5
6
7
8
9
10
11
|
<div ng-init="names=['1','2','3']" ng-controller="myCtrl"> <li>{{rootPerson}}</li> <ul> <li ng-repeat="item in names"> {{item}} </li> <li ng-repeat="x in namess"> {{x}} </li> </ul> </div> |
Angular.JS控制器
ng-controller指令定义了应用程序控制器，控制器是JavaScript对象，由标准的JavaScript对象的构造函数创建。
控制器方法：是在控制器里面创建方法，之后在VIEW中调用。感觉前端的语言很屌，感觉要颠覆后端语言的节奏。
|
1
2
3
4
5
|
<div ng-controller="method"> <input type="text" ng-model="firstName"/><br/> <input type="text" ng-model="lastName"/><br/> {{fullName()}}</div> |
|
1
2
3
4
5
6
7
8
|
app.controller("method",function($scope){ $scope.firstName="张"; $scope.lastName="辉"; //定义的方法fullName(); $scope.fullName=function(){ return $scope.firstName+""+$scope.lastName; }}); |
|
1
2
3
4
5
6
7
8
9
10
11
|
$scope.persons=[ {name:'ahui',country:'jiaxin'}, {name:'ahui',country:'jiaxin'}, {name:'ahui',country:'jiaxin'} ];<ul> <li ng-repeat="x in persons"> {{x.name+','+x.country}} </li></ul> |
AngularJS过滤器
AngularJS通过使用管道字符(|)添加到表达式和指令中。
- 向表达式添加过滤器
过滤器可以通过一个管道字符(|)和一个过滤器添加到表达式中。
|
1
2
3
4
5
6
7
8
|
<div> <input name="text" ng-model="name"/><br/> <input name="text" ng-model="pwd"/><br/> <h4> {{name|uppercase}}<br/> //大写 {{pwd|lowercase}} //小写 </h4></div> |
- 向指令添加过滤器
添加方法是一样的；
|
1
2
3
4
5
|
<ul> <li ng-repeat="x in persons|orderBy:'country'"> {{x.name+','+x.country}} </li></ul> |
- 过滤输入
输入过滤器可以通过一个管道字符(|)和过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。利用filter从数组中选择一个子集。
|
1
2
3
4
5
6
7
8
9
|
<p>输入过滤:</p><p><input type="text" ng-model="test"></p><ul> <li ng-repeat="x in names | filter:test | orderBy:'country'"> {{ (x.name | uppercase) + ', ' + x.country }} </li></ul> |
