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替代了

要是restrict有两个值，比如上代码

<body>

  <my-directive></my-directive>

  <div my-directive></div>

  <script>

    angular.module('myApp', [])

    .directive('myDirective', function() {

      return {

        restrict: 'AE', // modified line

        template: '<a href="http://google.com">Click me</a>'

      }

    })

  </script>

</body>

这样的话就会，

<body>

  <my-directive><a href="http://google.com">Click me</a></my-directive>

  <div my-directive=""><a href="http://google.com">Click me</a></div>

  <script>

    angular.module('myApp', [])

    .directive('myDirective', function() {

      return {

        restrict: 'AE', // modified line

        template: '<a href="http://google.com">Click me</a>'

      }

    })

  </script>

</body>

看到了吗，两个里面都有template

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

  1. angular学习的一些小笔记(中)之基础ng指令

    一.布尔属性指令: ng-disabled:就是ng-disabled=true-->就指向不可用 <!doctype html> <html ng-app="&qu ...

  2. angular学习的一些小笔记(中)之ng-disabled轻松实现按钮是否可点击状态

    哇,这个可以轻松实现输入值就按钮可点击,输入框没有值则不可点击的状态呀 看代码 <!doctype html> <html ng-app=""> <h ...

  3. angular学习的一些小笔记(中)之双向数据绑定

    <!doctype html> <html ng-app=""> <head> <script src="https://aja ...

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

    ng-init是给angular执行给定的表达式,初始化变量的值 <!DOCTYPE html> <html> <head> <meta charset='U ...

  5. angular学习的一些小笔记(中)之表单验证

    表单验证 我去,我感觉我这个人其实还是一个很傻逼的一个人,老是因为拼错了一个单词或者怎么样就浪费我很长时间,这样真的不行不行,要正确对待这个问题,好了,说正题吧,angular也有表单验证minlen ...

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

    下面这种promise的用法,我从第一篇$http笔记到$resource笔记中,一直都有用到: HttpREST.factory('cardResource',function($resource) ...

  7. angular学习笔记（1）- 四大核心特性

    angular1学习笔记(1) -  angular1四大核心特性 1.MVC model:数据模型层 controller:业务逻辑和控制逻辑 view:视图层,负责展示 2.模块化 Module ...

  8. angular学习笔记(三十一)-$location(2)

    之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...

  9. angular学习笔记(三十一)-$location(1)

    本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的 ...

随机推荐

  1. 被废了的display:box弹性盒模型

    这几天在研究弹性布局,看书中写的是display:box,结果在chrome浏览器中是正常的,想着移动端大部分浏览器也是webkit内核的应该也没啥问题,结果确实没问题,但仔细一看,高度呢?好吧,严重 ...

  2. 数据访问模式：数据并发控制（Data Concurrency Control）

    1.数据并发控制(Data Concurrency Control)简介 数据并发控制(Data Concurrency Control)是用来处理在同一时刻对被持久化的业务对象进行多次修改的系统.当 ...

  3. NYOJ995硬币找零(简单dp)

    /* 题意:给你不同面额的硬币(每种硬币无限多),需要找零的面值是T,用这些硬币进行找零, 如果T恰好能被找零,输出最少需要的硬币的数目!否则请输出剩下钱数最少的找零方案中的最少硬币数! 思路:转换成 ...

  4. 使用Google产品以来遇到的最糟糕、最霸道、最让人抓狂的设计

    很久没有登录cnblogs@gmail.com这个邮箱,今天通过gmail.com登录了一下,登录后出现一个对话框要求设置性别与出生日期,而且必须要设置,不设置不让登录. 这个邮箱是我们网站用的是邮箱 ...

  5. MYSQL的深入学习--优化步骤

    MySql优化的一般步骤 1.通过show status 命令了解各种sql的执行效率 SHOW STATUS提供msyql服务器的状态信息 一般情况下,我们只需要了解以”Com”开头的指令 show ...

  6. Socket桥（转载）

    最好方案:使用haproxy 或者nginx转发.自己写程序性能和监控难保证,推荐使用开源软件替代. 源地址为:http://baishaobin2003.blog.163.com/blog/stat ...

  7. AngularJS in Action读书笔记4(实战篇)——创建Statistic模块

    个人感觉<Angularjs in action>这本书写的很好,很流畅,循序渐进,深入浅出,关键是结合了一个托管于Github上的实例讲解的,有代码可查,对于初学者应该是个不错的途径.( ...

  8. Jackson序列化和反序列化Json数据完整示例

    Jackson序列化和反序列化Json数据 Web技术发展的今天,Json和XML已经成为了web数据的事实标准,然而这种格式化的数据手工解析又非常麻烦,软件工程界永远不缺少工具,每当有需求的时候就会 ...

  9. Moon.Orm 5.0(MQL版)及之前版本的开源计划

    开源综述:步步开源 Moon.Orm 5.0 (MQL版) 版本维护及下载 (跟踪发布) Moon.Orm 5.0系列文章 Moon.Orm 5.0性能问题,将发言权交给你! 一.5.0目前的情况,步 ...

  10. 【Android学习笔记】XmlResourceParser解析xml文件

    最近学习Android时,需要用到解析XML文件里的数据,可以用XmlResourceParser来解析xml文件,正好将此记录下来. XmlResourceParser里常用的字段和方法 首先先给出 ...