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è)來自父scope的函數(shù),一個(gè)操作
?return {
? ? ? ? restrict: 'EA'，
? ? ? ? scope:{
? ? ? ? ? ? ? ?highSearch: '@', ?//值傳遞 （字符串，單向綁定）
? ? ? ? ? ? ? searchData:'&', ? //傳遞一個(gè)來自父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)容顯示到頁面
假設(shè)，template模板內(nèi)的內(nèi)容過多，就應(yīng)該使用
return{ templateUrl：'tpl/blocks/searchTitle.html',? }來對(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，可以訪問required指定的控制器
}
參數(shù)說明：scope，element, attrs
scope：即與指令元素相關(guān)聯(lián)的當(dāng)前作用域，可以用來注冊(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“,頁面呈現(xiàn)為元素，scope作用域中name為單向值傳遞，amount為雙向綁定，save為傳遞一個(gè)來自父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:"&",
頁面html中指令配置的是，<my-dir ? save="saveChanges('我是自定義指令中要響應(yīng)的事件')">,相當(dāng)于把js中的$scope.saveChanges事件傳遞過來了
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}}值的變化，頁面中name="{{customerName}}"對(duì)應(yīng)的是js的$scope.customerName
});
//發(fā)現(xiàn)文章?https://blog.csdn.net/baidu_24024601/article/details/52710331
