Angular（指令及交互）
- 1.特點
- 1.不依賴控制器
- 2.指令默認不會產生作用域，可以聲明創建作用域，一般不聲明
- 3.angular可以包裝成指令對象：angular.element=$(this)
- 2.指令分類
- 裝飾性
- 負責添加功能
- 組件式
- 替換成一個完整的組件
- 有template的一般是組件
3.指令格式
- 屬性 A Attribute
<div drag></div>- 元素 E Element
<drag></drag>- 類 C Class
<div class="drag"></div>- 註釋 M Mommit
<!--directive:drag-->- 4.命名規範
- HTML中，用短線連接
- JS 採用駝峯命名法
- 5.directive指令
var app=angular.module('appModule',[]);
app.directive("myDrag",function () { //JS採用駝峯命名法*
return {//默認生效的 AE
restrict:'ACME',//限制生效範圍,每個字母代表一個格式
replace:true, //替換外層原有標籤，要求模板必須有一個根節點 template中的標籤是根節點
template:`<div><h1>Hello Angular</h1><p>你好</p></div>` //這裏的div是根節點，涉及到模板替換要有一個根節點
}
})- 6.裝飾性指令
var app=angular.module('appModule',[]);
app.directive('colorRed',function () {
return {
restrict:'A',//寫代碼之前，記得限制範圍
//操作DOM
link:function (scope,element,attr) { //連接函數 連接作用域和視圖 scope-->形參 element--》當前指令所在元素,angular要加單位 attr 當前指令上的所有屬性
//scope代表當前指令所在作用域，指令沒有創建作用域，使用的是上一級
element.css({'color':'red','font-size':'100px'})
}
}
})7.組件
（1）特點：
- a.通過屬性傳遞數據
<div class="col-md-12"> <!--通過屬性 傳遞數據--> <panel title="這是標題1">這是內容1</panel> <panel title="這是標題2">這是內容2</panel> <panel title="這是標題3">這是內容3</panel> </div>- b.封裝好的組件可以多次調用
- c.作用域
（2）組件中的域 scope
- a.默認不會創建作用域
- b.書寫方式1：scope：true —》【true（產生） false（不產生 默認）】【存在父子關係，可以獲取值】
- c.書寫方式2：scope：{} –》創建獨立作用域，自己的屬性放在自己的域中（可以防止值的覆蓋），不存在父子關係，無法獲取值，和$rootScope平級
- 指令中獨立的作用域，利用屬性進行方法的傳遞時，採用的方式：屬性=”作用域上的方法（）” 指令中用& 接收
<script> var app=angular.module('appModule',[]); app.directive('panel',function () { return{ restrict:'E', //封裝好一個組件可以多次調用 templateUrl:`tmpl/panel.html`,//通過路徑引用HTML transclude:true,//將內容內嵌到panel中 link:function (scope, element, attr) { //想拿到attr 中的屬性放在panel的heading中 視圖可以通過{{}}來獲取值 scope.title=attr.title; }, scope:true///產生作用域scope默認是false 不產生、 scope:{} -》這樣也可以 創建獨立作用域屬性放在自己的域中，防止覆蓋 } }) </script> panel:<div class=panel-body ng-transclude></div>
8.指令符號
進行指令符號操作的時候，如果template中引用的是templateUrl時，一個改變，另一個也會改變
- template:
<input ng-model="title">, - templateUrl:
tmpl/5-1.html,//引用地址時，改變一個另一個也會被修改
（1）@
- a.單向修改（根變枝變，枝變根不變）
- b.取得是字符串,聲明的字符串和外邊的值無關
- c.前後名字相同可以去掉
scope:{ title:'@title' // <=> title:'@' }（2）=
- 雙向數據改變
- 互相影響，一個變另一個也跟着變
- 變量，相當於賦值
scope:{ title:'=tit'//變量 雙向改變 }- （3）&
- 對外部方法的調用
- template:
<body>
<input type="text" ng-model="title">
<!--這裏傳的是變量 -->
<panel ss="say(a,b)"></panel>
<script src="node_modules/angular/angular.js"></script>
<script>
/*指令中有獨立作用域，將方法通過屬性傳到指令中，傳遞方式（屬性=“作用域上的方法（）”） 指令中用&接收*/
var app=angular.module('appModule',[]);
app.run(['$rootScope',function ($rootScope) {
$rootScope.say=function (who,where) {
alert(who);
alert(where)
}
}]);
app.directive('panel',function () {
return{
restrict:'E',
template:`<button ng-click="s({a:'你好',b:'hao'})">say</button>`,
scope:{
s:'&ss'
}
}
})
</script>- 9.指令的交互
指令模板1：(控制器一般放置在父級上，方便對子元素整體操作，避免代碼冗餘)
創建控制器，後邊放置將要對他進行引用是要執行的方法
控制器有可能是構造函數，在進行引用的時候最好用this，以保證方法的正確執行
多個元素同時使用一個指令模板時，應注意創建單獨域，以保證各個元素之間互不影響
指令模板2：
1.引用上級控制器
2.link函數引用執行。