AngularJS指令系统
最简单的例子：
<div ng-app="myModule">
<hello></hello>
</div>
<script>
var myModule = angular.module('myModule',[]);
myModule.directive("hello",function(){
return{
restrict:'E',
template:'<div>Hi everyone!</div>',
repalce:true
}
})
</script>
我们通过指令自定义了一个<hello>元素，页面效果为：
image.png
打开谷歌浏览器开发者模式，看到<hello></hello>里面被替换成为：
image.png
restrict
匹配模式，有四种模式：
- A：属性
- E:元素
- M：注释
- C：css样式类
一般来时模式很少使用。
AEC模式的使用方法示例：
<div ng-app="myModule">
<hello></hello><!-- 元素 E模式 -->
<div hello></div><!-- 属性 A属性模式 -->
<div class="hello"></div><!-- class样式类 C模式 -->
</div>
<script>
var myModule = angular.module('myModule',[]);
myModule.directive("hello",function(){
return{
restrict:'AEC',
template:'<div>Hi everyone!</div>',
repalce:true
}
})
</script>
网页效果：
image.png
默认使用A模式。
哪种情况下使用哪种模式？
- 当需要创建带有自己模板的指令时，使用E模式
- 当需要为已有的HTML标签增加功能时，使用A模式
template
模板
template:'<div>Hi everyone!</div>'是我们最终在页面上呈现出来的内容。如果内容较多时，我们可以把模板单独写在一个html中，再用templateUrl引入，写法为：templateUrl:'hello.html'
transclude
变换
当我们用指令自定义一个标签时，又在标签里面嵌套了一段内容时，我们自定义的标签内容往往会把原有内容替换，我们可以使用transclude来避免这样的情况出现。
<div ng-app="myModule">
<hello>
<div>指令内嵌套的内容</div>
</hello>
</div>
<script>
var myModule = angular.module('myModule',[]);
myModule.directive("hello",function(){
return{
restrict:'E',
template:'<div>Hi everyone!<div ng-transclude></div></div>',
transclude:true
}
})
</script>
页面效果：
image.png
replace
相反的，如果我们想把标签里面的所有内容全部替换掉，我们可以设置replace=true。
<div ng-app="myModule">
<hello>
<div>指令内嵌套的内容</div>
</hello>
</div>
<script>
var myModule = angular.module('myModule',[]);
myModule.directive("hello",function(){
return{
restrict:'E',
template:'<div>Hi everyone!</div>',
replace:true
}
})
</script>
效果：
image.png
link
用link函数创建可操作DOM的指令。
代码示例：
<div ng-app="myModule">
<div ng-controller = "MyCtrl">
<loader>加载数据</loader>
</div>
</div>
<script>
var myModule = angular.module('myModule',[]);
myModule.controller('MyCtrl',['$scope',function($scope){
$scope.loadData = function(){
console.log("加载数据中……");
}
}]);
myModule.directive("loader",function(){
return{
restrict:'AE',
link:function(scope,element,attr){
element.bind("click",function(){//绑定点击事件
scope.loadData();//控制器中定义的方法
})
}
}
})
</script>
可见，通过link函数我们给元素绑定了一个点击事件。
效果：
image.png
点击之后，控制台中显示：
image.png
