angular自定義指令
(1)directive---restrict屬性EACM
(function() {
? 'use strict';
? angular.module('app')
? ? .directive('searchTitle', ['$timeout', function($timeout) {
? ? ? return {
? ? ? ? restrict: 'EA'蜈彼，
? ? ? ? }
E:元素匕荸，html使用方式：<my-directive></my-directive>
A:屬性邀桑，html使用方式：<div my-directive></div>
C:class屬性铡溪，html使用方式：<div class="my-directive"></div>
M:注釋，html使用方式：<!-- directive:my-directive -->
(2)directive---scope隔離作用域葡公，用戶和父作用域進(jìn)行溝通交互的方式痊焊，三種形式：@，=芳绩，&
@ : ?表示單向綁定，接收父作用域的一個(gè)變量值撞反，值改變后不影響父作用域的變量值
= ：引用傳遞,與父scope中的屬性進(jìn)行雙向綁定
& : ?傳遞一個(gè)來(lái)自父scope的函數(shù),一個(gè)操作
?return {
? ? ? ? restrict: 'EA'妥色，
? ? ? ? scope:{
? ? ? ? ? ? ? ?highSearch: '@', ?//值傳遞 （字符串，單向綁定）
? ? ? ? ? ? ? searchData:'&', ? //傳遞一個(gè)來(lái)自父scope的函數(shù),一個(gè)操作遏片，這個(gè)函數(shù)會(huì)在html對(duì)應(yīng)的js中實(shí)現(xiàn)
? ? ? ? ? ? ? ?inputData:'=' ? ?//引用傳遞嘹害，雙向綁定
? ? ? ? ? },
? }
(3)directive---templateUrl模板 ? +?template模板
return { ? template:"<h1>這是自定義指令中的模板</h1>" ?}
結(jié)合replace:true;屬性，當(dāng)restrict為E時(shí)吮便，就替換整個(gè)template中的內(nèi)容顯示到頁(yè)面
假設(shè)笔呀，template模板內(nèi)的內(nèi)容過(guò)多，就應(yīng)該使用
return{ templateUrl：'tpl/blocks/searchTitle.html',? }來(lái)對(duì)應(yīng)一個(gè)單獨(dú)的html模板文件
(4)directive---link ? ?在指令中操作DOM髓需，我們需要link參數(shù)许师，這參數(shù)要求聲明一個(gè)函數(shù)，稱之為鏈接函數(shù)僚匆。
link: function(scope, element, attrs) {
// 在這里操作DOM
}
如果指令使用了require選項(xiàng)微渠，那么鏈接函數(shù)會(huì)有第四個(gè)參數(shù)，代表控制器或者所依賴的指令的控制器咧擂。
// require 'SomeController',
link: function(scope, element, attrs, SomeController) {
// 在這里操作DOM逞盆，可以訪問(wèn)required指定的控制器
}
參數(shù)說(shuō)明：scope，element, attrs
scope：即與指令元素相關(guān)聯(lián)的當(dāng)前作用域松申，可以用來(lái)注冊(cè)監(jiān)聽器：scope.$watch()
element：即當(dāng)前指令對(duì)應(yīng)的元素云芦，使用它可以操作該元素及其子元素。例如攻臀，這個(gè)span就是指令?my-directive所使用的元素焕数。
attrs：由當(dāng)前元素的屬性組成的對(duì)象。
到此刨啸，設(shè)置E屬性嘗試
html文件
對(duì)應(yīng)的js文件：
觀察1.html堡赔，可以發(fā)現(xiàn)my-dir是個(gè)自定義指令，
<my-dir ? name="{{customerName}}" ? amount="credit" ? save="saveChanges('我是自定義指令中要響應(yīng)的事件')" ?></my-dir>
自定義指令directive文件：
解析此文件设联，restrict設(shè)置為”E“,頁(yè)面呈現(xiàn)為元素善已，scope作用域中name為單向值傳遞，amount為雙向綁定离例，save為傳遞一個(gè)來(lái)自父scope的函數(shù),一個(gè)操作
template:"<div>"+"{{name}}: <input ? ng-model='amount' ?/>" ?+ "<button ?ng-click='save()'>保存</button>" ?+ "<div>",結(jié)合replace為true换团，就替換模板內(nèi)容。
其中button的ng-click = 'save()',那么這個(gè)save事件的響應(yīng)宫蛆，就靠指令和js交互了艘包，
scope中配置了save:"&",
頁(yè)面html中指令配置的是的猛，<my-dir ? save="saveChanges('我是自定義指令中要響應(yīng)的事件')">,相當(dāng)于把js中的$scope.saveChanges事件傳遞過(guò)來(lái)了
link在指令中操作dom,
注冊(cè)監(jiān)聽器：scope.$watch("amount",function(newVal,oldval){? ??
? ? ?//這里是監(jiān)聽amount對(duì)應(yīng)的”credit“值的變化，amount="credit"對(duì)應(yīng)的是js的$scope.credit
});
scope.$watch("name",function(newVal,oldval){
? ? ?//這里是監(jiān)聽name對(duì)應(yīng)的{{customerName}}值的變化想虎，頁(yè)面中name="{{customerName}}"對(duì)應(yīng)的是js的$scope.customerName
});
//發(fā)現(xiàn)文章?https://blog.csdn.net/baidu_24024601/article/details/52710331
