1.内置指令
什么是指令?
HTML在构建应用（App）时存在诸多不足之处，AngularJS通过扩展一系列的HTML属性或标签来弥补这些缺陷，所谓指令就是AngularJS自定义的HTML属性或标签，这些指令都是以ng-做为前缀的，例如ng-app、ng-controller、ng-repeat等。
内置指令
ng-app 指定应用根元素，至少有一个元 素指定了此属性。
ng-controller 指定控制器
ng-show控制元素是否显示，true显示、 false不显示
ng-hide控制元素是否隐藏，true隐藏、 false不隐藏
ng-if控制元素是否“存在”，true存在、 false不存在
ng-src增强图片路径
ng-href增强地址
ng-class控制类名
ng-include引入模板
ng-disabled表单禁用
ng-readonly表单只读
ng-checked单/复选框表单选中
ng-selected下拉框表单选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src=angular.js></script>
<script>
/*1.创建模板*/
var app = angular.module('app',[]);
/*2.创建控制器 */
app.controller('zmController',['$scope',function($scope){
$scope.name1='我是p标签1'
$scope.name2='我是p标签2'
}])
</script>
</head>
<!--3.绑定模板 -->
<!--4.绑定控制器-->
<body ng-app="app" ng-controller='zmController'>
<!--本质上就是css样式中的display-->
<!--还是存在的只是隐藏了-->
<p ng-show = "true">{{name1}}</p>
<p ng-hide = "false">{{name2}}</p>
<!--控制该标签是否存在-->
<!--不存在了-->
<p ng-if='false'>{{name2}}</p><!--出现以后我下次再也不想要他了 考虑到性能问题 比如广告 蒙版 -->
</body>
</html>
2.事件处理
使用方法为:ng-事件名称 = “事件响应方法名称( 参数)"
参数可以自己指定,
也可以传入事件对象$event
使用$scope来去实现事件定义的方法
$scope.事件名称 = function(参数){
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.red{
color: red;
}
.fz50{
font-size: 50px;
}
</style>
<script src = "angular.js"></script>
<script>
/*1.创建模板*/
var app = angular.module('app',[]);
/*2.创建控制器*/
app.controller('zmController',["$scope",function($scope){
/*1*/
$scope.name1 = "我是p标签1";
$scope.name2 = "我是P标签2";
/*2*/
$scope.url="002.jpg"
/*4.*/
$scope.isClass=false;
/*5.*/
//在模型当中实现事件方法
$scope.change1=function(){
$scope.isClass=true;
};
$scope.change2=function(){
$scope.isClass=false;
}
$scope.sty={
'font-size':'100px'
}
}]);
/*3.绑定模板*/
/*4.绑定控制器*/
</script>
</head>
<body ng-app='app' ng-controller="zmController">
<!--1-->
<!--本质上就是css样式中的display-->
<!--还是存在的只是隐藏了-->
<p ng-show = "true">{{name1}}</p>
<p ng-hide = "false">{{name2}}</p>
<!--控制该标签是否存在-->
<!--不存在了-->
<p ng-if='false'>{{name2}}</p>
<!--2.-->
<!----><!--实用原生的src链接一个图片-->
<!----><!--也显示但是会报错 script在下面的时候 页面从上往下执行走到src找地址 找url没有url地址 第一次找地址没有找到 找不到{{url}} 会报错 404 -->
<!--原生的HTML认不得ng-src 所以就不发请求就不会有错误 走到下面加载angular的时候再去加载
Angular 机制：
把所有DOM元素渲染完成之后，再去回头解析属于angular的东西
-->
<!--3-->
<!--
ng-class="{key:value}" 可以写多个
value是bool类型
-->
<p ng-class='{red:true,fz50:true}'>我是p标签</p>
<!--4-->
<p ng-class='{red:isClass,fz50:isClass}'>我是p标签</p>
<!--5-->
<!--事件处理
1.定义事件
2.在模型当中实现事件方法
-->
<button ng-click='change1()'>添加类</button>
<button ng-click='change2()'>移除类</button>
</body>
</html>
ng-include
在html当中是没有办法直接引入其它文件。
浏览器不允许html对文件进行操作。
原因：出于安全考虑。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="angular.js"></script>
<script>
/*1.创建模板*/
var app = angular.module('app',[]);
/*2.创建控制器*/
app.controller('zmController',["$scope",function($scope){
}])
/*3.绑定模板*//**/
/*4.绑定控制器*/
</script>
</head>
<body ng-app="app">
<!--
原理:
其实就是发送一个ajax请求
把请求的结果,插入到dom当中
-->
<div ng-include="'header.html'"></div>
<div>主题</div>
<div ng-include="'footer.html'"></div>
</body>
</html>
ng-switch
用于数据筛选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src=angular.js></script>
<script>
/*1.创建模块*/
var app = angular.module('app',[]);
/*2.创建控制器*/
app.controller("zmController",["$scope",function($scope){
$scope.course = ['html','js' ,'css']
}])
/*3.绑定模板*/
/*4.绑定控制器*/
</script>
<body ng-app='app' ng-controller='zmController'>
<ul>
<li ng-repeat="value in course" ng-switch='value'>{{value}}
<!--满足条件的展示出来 不满足的隐藏-->
<p ng-switch-when='css'>{{value}}</p>
</li>
</ul>
</body>
</html>
3.自定义指令
AngularJS允许根据实际的业务需要自定义指令.通过angular全局对象下的directive方法实现
自己给原生的html标签添加一些新属性,属性的名称自己决定
添加属性之后,要做什么功能,自己去决定
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body ng-app='app' ng-controller="zmController">
<p>{{name}}</p>
<!--自定义指令-->
<zm></zm>
<p zm></p>
<script src=angular.js></script>
<script>
/*1.创建模板*/
varapp=angular.module('app',[]) ;
/*2.创建控制器*/
app.controller("zmControlle",["$scope",function($scope){
$scope.name="zm"
}])
/*3.绑定模板*/
/*4.绑定控制器*/
<!--自定义指令-->
app.directive("zm", function() {
/*返回一个对象*/
return{
/*
E:以元素形式出现
A:以属性形式出现
C:以类的形式出现
* */
restrict:'EA',
template:"<div><1>我是一 个指令模板<p>我是标签< /p></h1> <p>1111</p></div>,// //指令模板必须得要有一个根元素包裹起来。
replace:false //是否替换原标签
}
});
</script>
</body>
</html>
自定义指令
第一个参数 指令名称
第二个参数 回调函数
E:以元素形式出现
A:以属性形式出现
C:以类的形式出现
image.png
templateUrl:"./template.html"//可以传路径
image.png
transclude:true //是否保留标签当中的内容
是否替换原有标签一定要是false,否则不出现任何东西
image.png
image.png
image.png
image.png
指令的作用域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body ng-app='app' ng-controller="zmController">
<!--<zmDir></zmDir> 结果出不来-->
<zm-dir></zm-dir><!--我是p-->
<p zm-dir></p><!--我是p-->
<!--1.在使用指令时,一定要注意大小写,
如果定义指令名称为大写,在使用时转成"-"-->
</body>
<script src=angular.js></script>
<script>
/*1.创建模板*/
var app=angular.module('app',[]);
/*2.创建控制器*/
app.controller("zmController",["$scope",function($scope){
}])
/*3.绑定模板*/
/*4.绑定控制器*/
app.directive("zmDir", function () {
/*返回一个对象*/
return{
restrict:'EA',
template:"<p>我是p</p>",
replace:false,//是否替换原有标签
transclude:true//是否保留标签当中的内容
}
});
</script>
</html>
这个效果是当我在输入框中输入内容时,底下的p标签里的内容就是什么
input里有什么
p就有什么
image.png
image.png
image.png
p里有什么
input里就有什么
/默认情况下， 指令使用的模型是与它所在控制器使用的是同一个/
image.png
controller:function ($scope) {//自定义的指令，可以有自己的作用域。有自己的模型
image.png
4.控制器作用域
1.每个属性所在的控制器都有对应的值的情况就是一一对应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body ng-app="app" >
<div ng-controller='parentController'>
<p>{{name}}</p>
<div ng-controller='zmController'>
<p>{{name}}</p>
</div>
<div ng-controller='zmController1'>
<p>{{name}}</p>
</div>
</div>
</body>
<script src="angular.js"></script>
<script>
/*1.创建模块*/
var app = angular.module('app',[]);
/*2.创建控制器*/
app.controller('parentController',['$scope',function ($scope) {
$scope.name="parent"
}]);
app.controller('zmController',['$scope',function ($scope) {
$scope.name="zm"
}]);
app.controller('zmController1',['$scope',function ($scope) {
$scope.name="zm1"
}]);
/*3.绑定模块 ng-app="app"*/
/*4.绑定控制器 */
</script>
</html>
image.png
2.找属性时,如果自己所在的控制器,没有该属性,就会去它对应的父级
image.png
image.png
image.png
3.如果父级也没有该属性,那就找不到值.
父级作用域不能访问子集的属性.找不到,所以不显示
image.png
找不到,所以不显示
image.png
4.根作用域:全局作用域
$rootScope.name=zm;
ng-init:初始化全局作用域
image.png
image.png
当父级属性为空时找到body中的初始化值使用
