angular学习之directive
Angular对directive的定义是一段代码片段，你 可以用它来操作DOM
使用directive可以实现事件的绑定
module.directive( "addBookButton", [ 'Book', function( Book ) {
return {
restrict: "A",
link: function( scope, element, attrs ) {
element.bind( "click", function() {
Book.addBook( { title: "Star Wars", author: "George Lucas" } );
});
}
}
}]);
使用directive可以实现不符合html语义的标签。
比如
<tabpanel>
<panel>子面板1</panel>
<panel>子面板2</panel>
</tabpanel>
实现：
<html ng-app='app'>
<body>
<hello></hello>
</body>
<js...>
</html>
js:
var appModule= angular.module('app',[]);
appModule.directive('hello',function(){
return{
restrict:'E',
template:'<div>Hi here</div>',
replace:ture
};
});
在return中的声明方式选项
E 元素:<youcanyoudo title="product"></youcanyoudu>
A 属性:<div youcanyoudo="product"></div>
C 样式:<div class="youcanyoudo":product></div>
M 注释:<!-- directive:youcanyoudo products -->
如果我们需要替换的HTML标签很长，显然不能用
拼接字符串的方式来写，这时候我们可以用templateUrl来替代template
，从而可以把模板写到一个独立的HTML文件中。
