angular学习之directive

最新推荐文章于 2024-02-20 14:10:51 发布

转载最新推荐文章于 2024-02-20 14:10:51 发布 · 124 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/youngercode/p/3866055.html

文章标签：

#javascript #ViewUI

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 注释:
如果我们需要替换的HTML标签很长，显然不能用
拼接字符串的方式来写，这时候我们可以用templateUrl来替代template
，从而可以把模板写到一个独立的HTML文件中。

转载于:https://www.cnblogs.com/youngercode/p/3866055.html