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. python数据操作方法封装

    工作中经常会用到数据的插叙.单条数据插入和批量数据插入,以下是本人封装的一个类,推荐给各位: #!/usr/bin/env python # -*- coding:utf-8 -*- # Author ...

  2. jsp实现简单的分页

    效果如下:<%-- Document : page Created on : 2014-11-18, 8:55:02 Author : HJZ --%> <%@page conten ...

  3. codeforces Gargari and Bishops（很好的暴力）

    /* 题意:给你一个n*n的格子,每一个格子都有一个数值!将两只bishops放在某一个格子上, 每一个bishop可以攻击对角线上的格子(主对角线和者斜对角线),然后会获得格子上的 数值(只能获取一 ...

  4. poj 2594Treasure Exploration(有向图路径可相交的最小路径覆盖)

    1 #include<iostream> #include<cstring> #include<algorithm> #include<cstdio> ...

  5. CentOS yum安装Apache + PHP + Tomcat7 + MySQL

    Linux平台上用得最多的web环境就是php.java和MySQL了,会搭建这个环境,就能把很多开源程序跑起来. 作为一个程序猿,虽然并不用精通运维的活,但基本的Linux环境搭建还是要掌握比较好, ...

  6. Tomcat7.0启动报错：java.lang.illegalargumentexception:taglib definition not consisten with specification version

    Tomcat7.0启动报错:java.lang.illegalargumentexception:taglib definition not consisten with specification ...

  7. 决战JS（二）

    紧接着上次的<决战JS>,分析总结一些比较实用的DEMO与新手分享,望大神拍砖. demo5.点击隐藏: 要实现这个功能只需要知道在onclick事件中加入对父节点的样式dislay设置为 ...

  8. Android 网络通信API的选择和实现实例

    Android开发网络通信一开始的时候使用的是AsyncTask封装HttpClient,没有使用原生的HttpURLConnection就跳到了Volley,随着OkHttp的流行又开始迁移到OkH ...

  9. Windows Azure Virtual Machine (31) 迁移Azure虚拟机

    <Windows Azure Platform 系列文章目录> 为什么要写这篇Blog? 之前遇到过很多客户提问: (1)我之前创建的虚拟机,没有加入虚拟网络.现在需要重新加入虚拟机网络, ...

  10. No compiler is provided in this environment. Perhaps you are running on a JRE rather than a JDK?

    以前用MyEclipse,现在用eclipse配置maven后,运行run install.报错: [ERROR] No compiler is provided in this environmen ...