angular笔记三
2017-06-11 本文已影响51人
AlanV
angular第三天
1.自定义指令
官方都是以ng-开头的指令，而angular内部可以通过自定义指令来创建属于你自己的指令
1.1模版
-
template用于简单模版书写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body ng-app="myApp">
<!--标签格式-->
<my-dir></my-dir>
<!--属性格式-->
<div my-dir></div>
<!--类名格式-->
<div class="myDir"></div>
<!--注释格式，注意注释格式必须配合replace：true一起使用，书写的时候左右两边都要加空格-->
<!-- directive:my-dir -->
<!--引入angular包-->
<script src="../第一天/angular-1.5.8/angular.js"></script>
<script>
// angular的监听范围
var app=angular.module('myApp',[]);
// 自定义指令directive,这个指令的第一个参数是名字,驼峰命名,第二个为函数
app.directive('myDir',function(){
return{
//书写模版
template:"<h1>哈哈哈哈</h1>",
//去壳，即去掉<my-dir></my-dir>
replace:true,
//这里是格式的权限，决定了可以用哪些格式书写模版，A：attribute(属性),E:element(元素),C:class(类名),M:common(注释)
restrict:'AECM'
}
});
</script>
</body>
</html>
-
ng-transclude属性，覆盖标签内容，缺陷：只能重复一段代码，也是外部将内容传递进来；transclude用替换当前标签中的innerHtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body ng-app="myApp">
<div my-dir>这是第一个</div>
<div my-dir>这是第二个</div>
<div my-dir>这是第三个</div>
<script src="../第一天/angular-1.5.8/angular.js"></script>
<script>
var app=angular.module('myApp',[]);
app.directive('myDir',function(){
return{
//transclude用替换当前标签中的innerHtml
//这个ng-transclude属性,是复制代码，但是有缺陷就是只能很死的复制同一段代码，在使用时，必须加transclude；
template:'<div><h1 ng-transclude>这是H1</h1><h2 ng-transclude>这是H2</h2><h3 ng-transclude>这是H2</h3></div>',
transclude:true
}
});
</script>
</body>
</html>
-
scope灵活的创建模版，赋值灵活
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body ng-app="myApp" ng-controller="myCtrl" >
<my-dir text1="555" text="666" text3='text4' fun='fun()'></my-dir>
<script src="../第一天/angular-1.5.8/angular.js"></script>
<script>
var app=angular.module('myApp',[]);
app.directive('myDir',function(){
return{
template:'<button ng-click="tet()">点击</button><div><h1>{{text1}}</h1><h2>{{text2}}</h2><h3>{{text3}}</h3></div>',
scope:{
text1:'@',
text2:'@text',
text3:'=text3',
tet:'&fun'
}
}
});
app.controller('myCtrl',function($scope){
$scope.text4="这个来自控制器的文字";
$scope.fun=function(){
console.log("这个是从controller出来的");
}
});
//这道题真的真的好玩，来来分析，@表示字符串，然后只有单个的时候，text1:'@'===text1：'@text1';
//text1表示属性，然后@text1表示值，然后text1传递内容书写入表达式，拿进来的是@text1（value值）
//@:传递的是字符串，=：传递的是变量，&：传递的是函数
</script>
</body>
</html>
- 封装bootstrap
- 如果外部有需要传递内容进来需要在scope中添加对应的属性
- scope有三中参数 true、{}、false不会创建独立作用域
- （true和{}）用来创建独立作用于域 ，区别true还会附带继承父作用域，{}不会继承
- false不会创建独立作用域, 在属性中scope以对象的形式出现
./mypaneltemplate.html文件
<div class="panel" ng-class="{'panel-primary':type=='primary','panel-success':type=='success'}">
<div class="panel-heading">
<h3 class="panel-title">{{titlea}}</h3>
</div>
<div class="panel-body">
<div ng-transclude></div>
</div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap/dist/css/bootstrap.css">
</head>
<body>
<div ng-app="myApp" class="row">
<div class="col-md-3">
<my-panel title2='标题一' body='内容一' type='success' >从外部传递过来的1</my-panel>
</div>
<div class="col-md-3">
<my-panel title2='标题2' body='内容二' type='primary' >从外部传递过来的2</my-panel>
</div>
</div>
<script src="js/angular.js"></script>
<!--template模板,通过text/ng-template将当前的script变成一个模板-->
<script id="mypaneltemplate" type="text/ng-template">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</script>
<script>
var app=angular.module('myApp',[]);
//以bootstrap来定义的panel
app.directive('myPanel',function () {
return {
//templateUrl 放模板的id/路径
templateUrl:'./mypaneltemplate.html',
//$scope.title
scope:{
titlea:'@title2',
body:'@',
type:'@'
},
transclude:true
}
})
</script>
</body>
</html>
- 作用域问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body ng-app="myApp" >
<div ng-controller="myCtrl">
<div ng-controller="myCtrl2">
{{text}}
</div>
<my-dir text='123' ></my-dir>
</div>
<script src="js/angular.js"></script>
<script>
var app=angular.module('myApp',[]);
app.directive('myDir',function () {
return {
template:'<div>{{text}}</div>',
// {}也会增加作用域，此时这个作用于不会找父类中的引用参数 true 会增加属于自己的作用域scope false
scope:{
text:'@text'
}
}
})
app.controller('myCtrl',function ($scope) {
$scope.text='这是ctrl中传递过来的内容'
})
app.controller('myCtrl2',function ($scope) {
})
</script>
</body>
</html>
作用域问题2
外部mypaneltemplate2.html文件
<div class="panel panel-primary" ng-init="isShow='true'" >
<div class="panel-heading" ng-click="isShow=!isShow">
<h3 class="panel-title">title</h3>
</div>
<div class="panel-body" ng-show="isShow">
<div >panel-body</div>
</div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./bootstrap/dist/css/bootstrap.css">
</head>
<body ng-app="myApp" >
<my-dir class="col-md-3"></my-dir>
<my-dir class="col-md-3"></my-dir>
<my-dir class="col-md-3"></my-dir>
<script src="js/angular.js"></script>
<script>
var app=angular.module('myApp',[]);
app.directive('myDir',function () {
return {
templateUrl:'mypaneltemplate2.html',
scope:{}
}
});
app.controller('myCtrl',function ($scope) {
})
</script>
</body>
</html>
- link 的用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.red{
background-color: red;
}
</style>
</head>
<body ng-app="myApp">
<div ng-controller=" myCtrl" my-link class="red">
<h1>{{test}}</h1>
</div>
<script src="js/angular.js"></script>
<script>
var app=angular.module('myApp',[]);
app.directive('myLink',function () {
//angular中不鼓励在除了link之外的地方操作dom元素
//link 用来在angular中操作dom
return {
link:function (scope,ele,atts) {
//scope 能够访问到当前的作用域
// console.log(scope);
//ele 获取到当前自定义指令中的jqLite对象
// console.log(ele[0]);
console.log(atts);
}
}
})
app.controller('myCtrl',function ($scope) {
//console.log($scope);
$scope.test='test';
})
</script>
</body>
</html>
- 过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body ng-app>
<!--number过滤器-->
<p>{{1000.126|number:2}}</p>
<!--lowercase& uppercase-->
<p>{{'HELLO'|lowercase}}</p>
<p>{{'lowercase'|uppercase}}</p>
<!--limitTo-->
<!--3表示显示个数，2表示起始位置-->
<p>{{[1,2,3,4,5,6,7]|limitTo:3:2}}</p>
<!--json过滤器-->
<pre>{{ {
"id":"1220562",
"alt":"https:\/\/book.douban.com\/book\/1220562",
"rating":{"max":10, "average":"7.0", "numRaters":282, "min":0},
"author":[{"name":"片山恭一"}, {"name":"豫人"}],
"alt_title":"",
"image":"https://img3.doubanio.com\/spic\/s1747553.jpg",
"title":"满月之夜白鲸现",
"mobile_link":"https:\/\/m.douban.com\/book\/subject\/1220562\/",
"summary":"那一年，是听莫扎特、钓鲈鱼和家庭破裂的一年。说到家庭破裂，母亲怪自己当初没有找到好男人，父亲则认为当时是被狐狸精迷住了眼，失常的是母亲，但出问题的是父亲……。",
"attrs":{
"publisher":["青岛出版社"],
"pubdate":["2005-01-01"],
"author":["片山恭一", "豫人"],
"price":["18.00元"],
"title":["满月之夜白鲸现"],
"binding":["平装(无盘)"],
"translator":["豫人"],
"pages":["180"]
},
"tags":[
{"count":106, "name":"片山恭一"},
{"count":50, "name":"日本"},
{"count":42, "name":"日本文学"},
{"count":30, "name":"满月之夜白鲸现"},
{"count":28, "name":"小说"},
{"count":10, "name":"爱情"},
{"count":7, "name":"純愛"},
{"count":6, "name":"外国文学"}
]
} | json:5}}</pre>
<!--时间过滤器-->
<p>{{1497080646471|date:'yyyy-MM-dd HH:mm:ss Z'}}</p>
<!--金钱过滤器-->
<p>没有过滤器{{1000}}</p>
<p>金钱过滤器:{{1000|currency}}</p>
<p>金钱过滤器:{{1000|currency:'￥':5}}</p>
<script src="js/angular.js"></script>
<script src="js/angular-locale_zh-cn.js"></script>
<script>
</script>
</body>
</html>
- filter过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body >
<div ng-app="myApp">
<div ng-controller="myCtrl">
<input type="text" ng-model="search" >
<ul>
<!--filter过滤器用来数组或者是对象 用在repeate中-->
<li ng-repeat="use in list | filter:{name:search}">
<span>name:{{use.name}}</span>
<span>phone:{{use.phone}}</span>
</li>
</ul>
</div>
</div>
<script src="js/angular.js"></script>
<script>
var app=angular.module('myApp',[]);
app.controller('myCtrl',function ($scope) {
$scope.search=''
$scope.list=[
{name:'John', phone:'555-1276'},
{name:'Mary', phone:'800-BIG-MARYJ'},
{name:'Mike', phone:'555-4321'},
{name:'Adam', phone:'555-5678'},
{name:'Julie', phone:'555-8765'},
{name:'Juliette', phone:'555-5678'}]
})
</script>
</body>
</html>
- orderBy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body >
<div ng-app="myApp">
<div ng-controller="myCtrl">
<input type="text" ng-model="search" >
phone的排序 <input type="checkbox" ng-model="orderByPhone">
<ul>
<li ng-repeat="use in list |orderBy:'phone':orderByPhone">
<span>name:{{use.name}}</span>
<span>phone:{{use.phone}}</span>
</li>
</ul>
</div>
</div>
<script src="js/angular.js"></script>
<script>
var app=angular.module('myApp',[]);
app.controller('myCtrl',function ($scope) {
$scope.search='';
$scope.orderByPhone=true
$scope.list=[
{name:'John', phone:'555-1276'},
{name:'Mary', phone:'800-BIG-MARYJ'},
{name:'Mike', phone:'555-4321'},
{name:'Adam', phone:'555-5678'},
{name:'Julie', phone:'555-8765'},
{name:'Juliette', phone:'555-5678'}]
})
</script>
</body>
</html>
