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. Form的enctype="multipart/form-data"作用

    <form class="form-horizontal" role="form" method="post" action=&quo ...

  2. iOS $299刀企业证书申请的过程以及细节补充(二)

    上篇博客写的过程中,没有图,也没有相应的说明.这次再补充一些信息: 1.从 https://developer.apple.com/ios/enroll/dunsLookupForm.action 申 ...

  3. hibernate（六）一对一映射

    关系映射是指对象之间的关系,并不是指数据库的关系,关系映射是解决当对象处于以下关系之一时,数据库表该如何映射的问题 (一)一对一单向外键关联 1.注解方式配置 创建一个Husband类和Wife类 H ...

  4. java之初识服务器跨域获取数据

    当一个项目膨大到无法进行整理时,而作为新负责维护的团队是非常苦恼的.对于想实现两个系统的数据访问,使用Ajax数据请求方式获取jsonp格式的数据 需要有前端jquery库文件. 前端代码通过jque ...

  5. C/C++定义全局变量/常量几种方法的区别

    在讨论全局变量之前我们先要明白几个基本的概念: 1. 编译单元(模块):    在IDE开发工具大行其道的今天,对于编译的一些概念很多人已经不再清楚了,很多程序员最怕的就是处理连接错误(LINK ER ...

  6. PHP API接口测试小工具

    前端时间给手机客户端做接口,当时弱爆了,写完API接口后,也不怎么测试,最后是等客户端调用的时候检验API的正确性. 后面利用PHP的curl实现Post请求,检验API接口的正确性:配合前面做的一个 ...

  7. Android进程间通信之LocalSocket通信

    LocalSocket,在Unix域名空间创建的一个套接字(非服务端). 是对Linux中Socket进行了封装,采用JNI方式调用,实现进程间通信. 具体就是Native层Server和Framew ...

  8. （高德地图）marker定位 bug 解决总结

    项目背景: 一个项目bug,项目中用到高德地图,默认打开页面会生成一个marker(下图红色icon),然后用户拖动marker到想要的位置,并且保存. 用户反映定位不准确,在当前页面编辑的位置,到后 ...

  9. LeetCode - Binary Tree Level Order Traversal II

    题目: Given a binary tree, return the bottom-up level order traversal of its nodes' values. (ie, from ...

  10. 使用DevExpress官方汉化文件对界面进行汉化的过程

    在较早期的Dev开发中,基本上都是在使用一个DLL包的汉化文件,如基于13.1的汉化包文件Dxper.LocalizationCHS.Win.v13.1.5.dll,这个汉化包也比较方便,大多数时候复 ...