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. jeasyUI的treegrid批量删除多行(转载)

    看上去,JavaScript的变量类型,也可以分为值类型和引用类型.赋值操作中,值类型,各自独立,互不干涉:引用类型,指针而已,大家指向同一个对象. 为什么这样说呢? 我是从jeasyUI的treeg ...

  2. Jetty 服务器的知识

    Jetty 服务器的知识 也许你还没有听说过这个Jetty服务器,不过它确实是一种比较轻量级的Java服务器,和Tomcat一样,专门解释JavaWeb程序的服务器.因为在之前学习Java Web 的 ...

  3. JQuery学习之各种效果演示

    1.隐藏与显示:hide()和show(),toggle() **隐藏: $("#hide").click(function(){ $("p").hide(); ...

  4. WP、Win10开发或者WPF开发时绘制自定义窗体~例如：一个手机

    WP and Win10 效果:(数字是参考值,和UI无关) <Page x:Class="_05.AllControls._BorderUsePage" xmlns=&qu ...

  5. 编写Shader时的一些性能考虑

    编写shader时的一些建议:1.只计算需要计算的东西:2.通常,需要渲染的像素比顶点数多,而顶点数又比物体数多很多.所以如果可以,尽量将运算从PS移到VS,或直接通过script来设置某些固定值:3 ...

  6. 如何用Python实现目录遍历

    1. 基本实现 [root@localhost ~]# cat dirfile.py import os path='/tmp' for dirpath,dirnames,filenames in o ...

  7. LeetCode:Maximum Depth of Binary Tree_104

    LeetCode:Maximum Depth of Binary Tree [问题再现] Given a binary tree, find its maximum depth. The maximu ...

  8. 图像映射map

    <map>标签:带有可点击区域的图像映射 定义一个客户端图像映射.图像映射(image-map)指带有可点击区域的一幅图像. 效果图: 点击相应蓝色标签可进入详情页面浏览. 代码: < ...

  9. Tools - Markdown

    Markdown 轻量级标记语言,使用易读易写的纯文本格式和类似HTML的标记语法来编写具有一定的格式的文档. wiki - Markdown 三分钟学会书写格式良好的笔记(Markdown) 为知笔 ...

  10. PHP类和对象函数实例详解

    1. interface_exists.class_exists.method_exists和property_exists: 顾名思义,从以上几个函数的命名便可以猜出几分他们的功能.我想这也是我随着 ...