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>
<body>
    <my-directive></my-directive>
</body>
<script type="text/javascript">
    angular.module(‘app‘,[])
    .directive(‘myDirective‘,function(){
        return{
            restrict:‘E‘,
            template:‘<a href="#">click me</a>‘
        };
    })
</script>
</html>

这段代码在浏览器上打开是这样的,

<my-directive><a href="#">click me</a></my-directive>

看到吗,directive里面的template在标签的里面,是标签的子元素

然后再看,在配置一个replace

<body>
    <a href="#">click me</a>

<script type="text/javascript">
    angular.module(‘app‘,[])
    .directive(‘myDirective‘,function(){
        return{
            restrict:‘E‘,
            replace:true,
            template:‘<a href="#">click me</a>‘
        };
    })
</script>
</body>

replace为true的时候可以看到的是原来的自定义标签被template替代了

时间: 2024-10-22 19:45:35

angular学习的一些小笔记(中)之directive的相关文章

angular学习的一些小笔记(中)之ng-init

ng-init是给angular执行给定的表达式,初始化变量的值 <!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title>ng-init</title> <script type="text/javascript" src='static/plugins/angular.min.js'></script> </head&g

angular学习笔记(二十八-附2)-$resource中的promise对象

下面这种promise的用法,我从第一篇$http笔记到$resource笔记中,一直都有用到: HttpREST.factory('cardResource',function($resource){ return $resource('/card/user/:userID/:id',{userID:123,id:'@id'},{charge:{method:'POST',params:{charge:true},isArray:false}}) }); HttpREST.factory('h

angular学习笔记(二十八-附1)-$resource中的资源的方法

通过$resource获取到的资源,或者是通过$resource实例化的资源,资源本身就拥有了一些方法,比如$save,可以直接调用来保存该资源: 比如有一个$resource创建的服务: var service = angular.module('myRecipe.service',['ngResource']); service.factory('Recipe',['$resource',function($resource){ return $resource('/recipe/:id',

angular学习笔记(九)-css类和样式2

在上一个例子中,元素的类名使用拼接的方法,这样,类名中就不得不带有true或false,并且不易维护,所以,angular使用ng-class属性来控制元素的类名: 我们来看一个小例子,点击error按钮,顶部提示错误框,点击warning按钮,顶部提示警告框. 错误框的类名是.err,警告框的类名是.warn: <!DOCTYPE html> <html ng-app> <head> <title>6.2css类和样式</title> <

angular学习笔记(一)

入门实例: 一个购物车产品清单,可以自行改变数量,总价自动计算的小例子: 代码如下: <!DOCTYPE html> <html ng-app> <head> <title>1.1实例:购物车</title> <meta charset="utf-8"> <script src="../angular.js"></script> <script src="

angular学习笔记(十九)

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

angular学习笔记(十七)-路由和切换视图

本篇介绍angular中如何通过判断url的hash值来显示不同的视图模板,并使用不同的控制器: 下面,通过一个例子,来一步一步说明它的用法: 我们要做一个邮箱应用,打开的时候显示的是邮件列表: 然后点击邮件主题,可以查看该邮件的详细内容: 点击返回列表,再回到列表页 一. 创建index页面: <!DOCTYPE html> <html> <head> <title>14.1路由和视图切换</title> <meta charset=&q

【iOS开发每日小笔记(九)】在子线程中使用runloop,正确操作NSTimer计时的注意点 三种可选方法

这篇文章是我的[iOS开发每日小笔记]系列中的一片,记录的是今天在开发工作中遇到的,可以用很短的文章或很小的demo演示解释出来的小心得小技巧.它们可能会给用户体验.代码效率得到一些提升,或是之前自己没有接触过的技术,很开心的学到了,放在这里得瑟一下.其实,90%的作用是帮助自己回顾.记忆.复习. 一直想写一篇关于runloop学习有所得的文章,总是没有很好的例子.正巧自己的上线App Store的小游戏<跑酷好基友>(https://itunes.apple.com/us/app/pao-k

angular学习笔记(二十八)-$http(6)-使用ngResource模块构建RESTful架构

ngResource模块是angular专门为RESTful架构而设计的一个模块,它提供了'$resource'模块,$resource模块是基于$http的一个封装.下面来看看它的详细用法 1.引入angular-resource.min.js文件 2.在模块中依赖ngResourece,在服务中注入$resource var HttpREST = angular.module('HttpREST',['ngResource']); HttpREST.factory('cardResource