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. c#将list集合转换为datatable的简单办法

    public static class ExtensionMethods        {        /// <summary>        /// 将List转换成DataTabl ...

  2. 深入理解PHP内核(六)哈希表以及PHP的哈希表实现

    原文链接:http://www.orlion.ga/241/ 一.哈希表(HashTable) 大部分动态语言的实现中都使用了哈希表,哈希表是一种通过哈希函数,将特定的键映射到特定值得一种数据 结构, ...

  3. Packet for query is too large(1767212 > 1048576)mysql在存储图片时提示图片过大

    原网址:http://blog.csdn.net/bigbird2012/article/details/6304417 错误现象:Packet for query is too large(1767 ...

  4. 使用Javascript监控前端相关数据

    项目开发完成外发后,没有一个监控系统,我们很难了解到发布出去的代码在用户机器上执行是否正确,所以需要建立前端代码性能相关的监控系统. 所以我们需要做以下的一些模块: 一.收集脚本执行错误 functi ...

  5. 数据结构：JAVA_二叉数查找树基本实现（中）

    数据结构:二叉数查找树基本实现(JAVA语言版) 1.写在前面 二叉查找树得以广泛应用的一个重要原因是它能保持键的有序性,因此我们可以把它作为实现有序符号表API中的众多方法的基础. 也就是说我们构建 ...

  6. Android基于mAppWidget实现手绘地图（二）--概要

    离线地图是一张被切成类似瓷砖般格子图像组成,这些被切开的格子组织成多个缩放级别.缩放级别是从0开始.0这个缩放级别,地图图像的尺寸为1*1像素.在每下一个缩放级别,图像尺寸则会两倍递增. 每个地图都是 ...

  7. 让你心动的 HTML5 & CSS3 效果【附源码下载】

    这里集合的这组 HTML5 & CSS3 效果,有的是网站开发中常用的.实用的功能,有的是先进的 Web 技术的应用演示.不管哪一种,这些案例中的技术都值得我们去探究和学习. 超炫的 HTML ...

  8. Linux下通过源码编译安装程序

    本文简单的记录了下,在linux下如何通过源码安装程序,以及相关的知识.(大神勿喷^_^) 一.程序的组成部分 Linux下程序大都是由以下几部分组成: 二进制文件:也就是可以运行的程序文件 库文件: ...

  9. 实现jquery.ajax及原生的XMLHttpRequest调用WCF服务的方法

    废话不多说,直接讲解实现步骤 一.首先我们需定义支持WEB HTTP方法调用的WCF服务契约及实现服务契约类(重点关注各attribute),代码如下: //IAddService.cs namesp ...

  10. ROS 常用命令字典

    版权声明:本文为博主原创文章,转载请标明出处: http://www.cnblogs.com/liu-fa/p/5761448.html 该博文适合已经具备一定的ROS编程基础的人,快速查看ROS相关 ...