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文件中。

angular学习之directive

时间: 2024-10-25 20:37:04

angular学习之directive的相关文章

angular学习(十二)—— Directive

directive介绍 directive是DOM元素上的标记,告诉angularjs的HTML编译器($complile)给DOM元素附加上一些特殊的行为,或者是改变DOM元素和它的子元素. 看到编译两个字,很多人会感到很懵,javascript不是解释执行的吗.其实这里的编译是因为,给html附加directive的递归过程很像是编译源代码的过程,所以才叫编译. angularjs内置了一套directive,像ngBind, ngModel和ngClass.就像你创建controller和

angular学习的一些小笔记(中)之directive

directive里面的几个配置,上代码就清晰了 <!DOCTYPE html> <html ng-app='app'> <head> <meta charset='UTF-8'> <title>test</title> <script type="text/javascript" src='static/plugins/angular.min.js'></script> </head

Angular之指令Directive系列

项目筹备近期开启Angular学习,指令比较难理解所以记录备案,推荐视频大漠穷秋 Angular实战 由于篇幅过长,列举大纲如下: 一.指令directive概述 指令可以对元素绑定事件监听或者改变DOM结构而使HTML拥有像jQuery一样效果具有交互性.不同于jQuery,Angular设计核心思想是通过数据与模板的绑定,摆脱繁琐的DOM操作,而将注意力集中在业务逻辑上. 几种常见指令ng-app 指令用来指定ng的作用域是在那个标签以内部分(<html ng-app="myApp&q

学习AngularJs:Directive指令用法(完整版)

这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下 本教程使用AngularJs版本:1.5.3 AngularJs GitHub: https://github.com/angular/angular.js/ AngularJs下载地址:https://angularjs.org/ 摘要:Directive(指令)笔者认为是AngularJ非常强大而有有用的功能之一.它就相当于为我们写了公共的自定义DOM元素或LASS属性或ATTR属性,并

angular学习笔记(十九)

本篇主要介绍angular使用指令修改DOM: 使用angular指令可以自己扩展html语法,还可以做很多自定义的事情.在后面会专门讲解这一块的知识,这一篇只是起到了解入门的作用. 与控制器,过滤器,服务,一样,可以通过模块实例的directive的方法来创建指令: var someModule = angular.module('SomeModule',[]); someModule.directive('directiveName',function(){ return { link: f

angular学习笔记(三十)-指令(5)-link

这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数:scope,iEle,iAttrs,ctrl,linker scope:指令所在的作用域,这个scope和指令定义的scope是一致的.至于指令的scope,会在讲解scope属性的时候详细解释 iEle:指令元素的jqLite封装.(也就是说iEle可以调用angular封装的简版jq的方法和属

angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令

在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指令(5)-link文章也提到了link函数的第五个参数linker. 这篇文章就来讲解一下transclude()方法(linker()方法),是怎么使用的,另外,它也是compile函数的第三个参数,用法一样. 下面就通过自己写一个简易的模拟ngRepeat的指令cbRepeat,来了解linke

angular学习笔记(三十)-指令(7)-compile和link(2)

继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的代码: html: <body> <div ng-controller="compileCtrl"> <level-one> <level-two> <level-three> hello,{{name}} </level-

angular学习笔记(三十)-指令(2)

本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: E 2. 属性: A 3. 样式类: C 4. 注释: M restrict的值可以是上面四个字母的任意一个或多个的组合. 不指定的话默认为A. 二. replace: 布尔值.是否将指令元素替换,可以有两个值: 1.true: 替换整个使用指令的元素 2.false: 不替换整个使用指令的元素,而