1.內(nèi)置指令
什么是指令?
HTML在構(gòu)建應(yīng)用（App）時存在諸多不足之處，AngularJS通過擴(kuò)展一系列的HTML屬性或標(biāo)簽來彌補(bǔ)這些缺陷仑濒，所謂指令就是AngularJS自定義的HTML屬性或標(biāo)簽苏遥，這些指令都是以ng-做為前綴的暂雹，例如ng-app不同、ng-controller、ng-repeat等颤殴。
內(nèi)置指令
ng-app 指定應(yīng)用根元素觅廓，至少有一個元 素指定了此屬性。
ng-controller 指定控制器
ng-show控制元素是否顯示诅病，true顯示哪亿、 false不顯示
ng-hide控制元素是否隱藏，true隱藏贤笆、 false不隱藏
ng-if控制元素是否“存在”蝇棉，true存在、 false不存在
ng-src增強(qiáng)圖片路徑
ng-href增強(qiáng)地址
ng-class控制類名
ng-include引入模板
ng-disabled表單禁用
ng-readonly表單只讀
ng-checked單/復(fù)選框表單選中
ng-selected下拉框表單選中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src=angular.js></script>
<script>
/*1.創(chuàng)建模板*/
var app = angular.module('app',[]);
/*2.創(chuàng)建控制器 */
app.controller('zmController',['$scope',function($scope){
$scope.name1='我是p標(biāo)簽1'
$scope.name2='我是p標(biāo)簽2'
}])
</script>
</head>
<!--3.綁定模板 -->
<!--4.綁定控制器-->
<body ng-app="app" ng-controller='zmController'>
<!--本質(zhì)上就是css樣式中的display-->
<!--還是存在的只是隱藏了-->
<p ng-show = "true">{{name1}}</p>
<p ng-hide = "false">{{name2}}</p>
<!--控制該標(biāo)簽是否存在-->
<!--不存在了-->
<p ng-if='false'>{{name2}}</p><!--出現(xiàn)以后我下次再也不想要他了 考慮到性能問題 比如廣告 蒙版 -->
</body>
</html>
2.事件處理
使用方法為:ng-事件名稱 = “事件響應(yīng)方法名稱( 參數(shù))"
參數(shù)可以自己指定,
也可以傳入事件對象$event
使用$scope來去實現(xiàn)事件定義的方法
$scope.事件名稱 = function(參數(shù)){
}
<!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.創(chuàng)建模板*/
var app = angular.module('app',[]);
/*2.創(chuàng)建控制器*/
app.controller('zmController',["$scope",function($scope){
/*1*/
$scope.name1 = "我是p標(biāo)簽1";
$scope.name2 = "我是P標(biāo)簽2";
/*2*/
$scope.url="002.jpg"
/*4.*/
$scope.isClass=false;
/*5.*/
//在模型當(dāng)中實現(xiàn)事件方法
$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-->
<!--本質(zhì)上就是css樣式中的display-->
<!--還是存在的只是隱藏了-->
<p ng-show = "true">{{name1}}</p>
<p ng-hide = "false">{{name2}}</p>
<!--控制該標(biāo)簽是否存在-->
<!--不存在了-->
<p ng-if='false'>{{name2}}</p>
<!--2.-->
<!----><!--實用原生的src鏈接一個圖片-->
<!----><!--也顯示但是會報錯 script在下面的時候 頁面從上往下執(zhí)行走到src找地址 找url沒有url地址 第一次找地址沒有找到 找不到{{url}} 會報錯 404 -->
<!--原生的HTML認(rèn)不得ng-src 所以就不發(fā)請求就不會有錯誤 走到下面加載angular的時候再去加載
Angular 機(jī)制：
把所有DOM元素渲染完成之后芥永，再去回頭解析屬于angular的東西
-->
<!--3-->
<!--
ng-class="{key:value}" 可以寫多個
value是bool類型
-->
<p ng-class='{red:true,fz50:true}'>我是p標(biāo)簽</p>
<!--4-->
<p ng-class='{red:isClass,fz50:isClass}'>我是p標(biāo)簽</p>
<!--5-->
<!--事件處理
1.定義事件
2.在模型當(dāng)中實現(xiàn)事件方法
-->
<button ng-click='change1()'>添加類</button>
<button ng-click='change2()'>移除類</button>
</body>
</html>
ng-include
在html當(dāng)中是沒有辦法直接引入其它文件篡殷。
瀏覽器不允許html對文件進(jìn)行操作。
原因：出于安全考慮埋涧。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="angular.js"></script>
<script>
/*1.創(chuàng)建模板*/
var app = angular.module('app',[]);
/*2.創(chuàng)建控制器*/
app.controller('zmController',["$scope",function($scope){
}])
/*3.綁定模板*//**/
/*4.綁定控制器*/
</script>
</head>
<body ng-app="app">
<!--
原理:
其實就是發(fā)送一個ajax請求
把請求的結(jié)果,插入到dom當(dāng)中
-->
<div ng-include="'header.html'"></div>
<div>主題</div>
<div ng-include="'footer.html'"></div>
</body>
</html>
ng-switch
用于數(shù)據(jù)篩選
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src=angular.js></script>
<script>
/*1.創(chuàng)建模塊*/
var app = angular.module('app',[]);
/*2.創(chuàng)建控制器*/
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允許根據(jù)實際的業(yè)務(wù)需要自定義指令.通過angular全局對象下的directive方法實現(xiàn)
自己給原生的html標(biāo)簽添加一些新屬性,屬性的名稱自己決定
添加屬性之后,要做什么功能,自己去決定
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.創(chuàng)建模板*/
varapp=angular.module('app',[]) ;
/*2.創(chuàng)建控制器*/
app.controller("zmControlle",["$scope",function($scope){
$scope.name="zm"
}])
/*3.綁定模板*/
/*4.綁定控制器*/
<!--自定義指令-->
app.directive("zm", function() {
/*返回一個對象*/
return{
/*
E:以元素形式出現(xiàn)
A:以屬性形式出現(xiàn)
C:以類的形式出現(xiàn)
* */
restrict:'EA',
template:"<div><1>我是一 個指令模板<p>我是標(biāo)簽< /p></h1> <p>1111</p></div>,// //指令模板必須得要有一個根元素包裹起來板辽。
replace:false //是否替換原標(biāo)簽
}
});
</script>
</body>
</html>
自定義指令
第一個參數(shù) 指令名稱
第二個參數(shù) 回調(diào)函數(shù)
E:以元素形式出現(xiàn)
A:以屬性形式出現(xiàn)
C:以類的形式出現(xiàn)
image.png
templateUrl:"./template.html"http://可以傳路徑
image.png
transclude:true //是否保留標(biāo)簽當(dāng)中的內(nèi)容
是否替換原有標(biāo)簽一定要是false,否則不出現(xiàn)任何東西
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> 結(jié)果出不來-->
<zm-dir></zm-dir><!--我是p-->
<p zm-dir></p><!--我是p-->
<!--1.在使用指令時,一定要注意大小寫,
如果定義指令名稱為大寫,在使用時轉(zhuǎn)成"-"-->
</body>
<script src=angular.js></script>
<script>
/*1.創(chuàng)建模板*/
var app=angular.module('app',[]);
/*2.創(chuàng)建控制器*/
app.controller("zmController",["$scope",function($scope){
}])
/*3.綁定模板*/
/*4.綁定控制器*/
app.directive("zmDir", function () {
/*返回一個對象*/
return{
restrict:'EA',
template:"<p>我是p</p>",
replace:false,//是否替換原有標(biāo)簽
transclude:true//是否保留標(biāo)簽當(dāng)中的內(nèi)容
}
});
</script>
</html>
這個效果是當(dāng)我在輸入框中輸入內(nèi)容時,底下的p標(biāo)簽里的內(nèi)容就是什么
input里有什么
p就有什么
image.png
image.png
image.png
p里有什么
input里就有什么
/默認(rèn)情況下， 指令使用的模型是與它所在控制器使用的是同一個/
image.png
controller:function ($scope) {//自定義的指令棘催，可以有自己的作用域劲弦。有自己的模型
image.png
4.控制器作用域
1.每個屬性所在的控制器都有對應(yīng)的值的情況就是一一對應(yīng)
<!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.創(chuàng)建模塊*/
var app = angular.module('app',[]);
/*2.創(chuàng)建控制器*/
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.找屬性時,如果自己所在的控制器,沒有該屬性,就會去它對應(yīng)的父級
image.png
image.png
image.png
3.如果父級也沒有該屬性,那就找不到值.
父級作用域不能訪問子集的屬性.找不到,所以不顯示
image.png
找不到,所以不顯示
image.png
4.根作用域:全局作用域
$rootScope.name=zm;
ng-init:初始化全局作用域
image.png
image.png
當(dāng)父級屬性為空時找到body中的初始化值使用
