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隔离作用域，用户和父作用域进行沟通交互的方式，三种形式：@，=，&
@ : 表示单向绑定，接收父作用域的一个变量值，值改变后不影响父作用域的变量值
= ：引用传递,与父scope中的属性进行双向绑定
& : 传递一个来自父scope的函数,一个操作
return {
restrict: 'EA'，
scope:{
highSearch: '@', //值传递 （字符串，单向绑定）
searchData:'&', //传递一个来自父scope的函数,一个操作，这个函数会在html对应的js中实现
inputData:'=' //引用传递，双向绑定
},
}
(3)directive---templateUrl模板 + template模板
return { template:"<h1>这是自定义指令中的模板</h1>" }
结合replace:true;属性，当restrict为E时，就替换整个template中的内容显示到页面
假设，template模板内的内容过多，就应该使用
return{ templateUrl：'tpl/blocks/searchTitle.html', }来对应一个单独的html模板文件
(4)directive---link 在指令中操作DOM，我们需要link参数，这参数要求声明一个函数，称之为链接函数。
link: function(scope, element, attrs) {
// 在这里操作DOM
}
如果指令使用了require选项，那么链接函数会有第四个参数，代表控制器或者所依赖的指令的控制器。
// require 'SomeController',
link: function(scope, element, attrs, SomeController) {
// 在这里操作DOM，可以访问required指定的控制器
}
参数说明：scope，element, attrs
scope：即与指令元素相关联的当前作用域，可以用来注册监听器：scope.$watch()
element：即当前指令对应的元素，使用它可以操作该元素及其子元素。例如，这个span就是指令 my-directive所使用的元素。
attrs：由当前元素的属性组成的对象。
到此，设置E属性尝试
html文件
对应的js文件：
观察1.html，可以发现my-dir是个自定义指令，
<my-dir name="{{customerName}}" amount="credit" save="saveChanges('我是自定义指令中要响应的事件')" ></my-dir>
自定义指令directive文件：
解析此文件，restrict设置为”E“,页面呈现为元素，scope作用域中name为单向值传递，amount为双向绑定，save为传递一个来自父scope的函数,一个操作
template:"<div>"+"{{name}}: <input ng-model='amount' />" + "<button ng-click='save()'>保存</button>" + "<div>",结合replace为true，就替换模板内容。
其中button的ng-click = 'save()',那么这个save事件的响应，就靠指令和js交互了，
scope中配置了save:"&",
页面html中指令配置的是，<my-dir save="saveChanges('我是自定义指令中要响应的事件')">,相当于把js中的$scope.saveChanges事件传递过来了
link在指令中操作dom,
注册监听器：scope.$watch("amount",function(newVal,oldval){
//这里是监听amount对应的”credit“值的变化，amount="credit"对应的是js的$scope.credit
});
scope.$watch("name",function(newVal,oldval){
//这里是监听name对应的{{customerName}}值的变化，页面中name="{{customerName}}"对应的是js的$scope.customerName
});
//发现文章 https://blog.csdn.net/baidu_24024601/article/details/52710331
