目录：directive()   restrict   replace   template   templateUrl  scope  transclude   ng-transclude   controller

directive()

自定义指令，第一个参数是自定义指令的名字，第二个参数是一个函数，这个函数的返回值就是自定义指令该干的事情。

 //自定义指令指定控制器的名字

            .directive("myDirective",function(){

                return{

                }

            })

restrict

指定调用自定义指令的方式：A属性/E标签/C类/M注释。推荐用属性的形式调用自定义指令。

.directive("myDirective",function(){

                return{

                    //指定此指令用属性调用

                    restrict:'A'

                }

            })

replace

规定自定义指令模板是被包含在指令元素里面还是替换自定义指令，true表示模板替换视图中的自定义指令。false是默认值，表示模板被嵌套在自定义指令中。

.directive("myDirective",function(){

                return{

                    //规定调用指令的方式

                    restrict:'A',

                    //模板替换自定义指令

                    replace:true,

                    //定义模板

                    template:'<a href="http://www.baidu.com">点我跳到百度<span>{{my}}</span></a>'

                }

            })

template

定义模板，值是一个html元素的字符串。参考replace代码

templateUrl

同template相似，值是一个引入外部模板的路径，不能跨域。

.directive("myDirective",function(){

                return{

                    //规定调用指令的方式

                    restrict:'A',

                    //模板替换视图中的指令

                    replace:true,

                    //定义模板路径

                    templateUrl:'../tem.html'

                }

            })

scope

创建隔离作用域，值为true时会继承父级作用域，创建一个新的作用域，值设置为一个对象时，不会继承父级作用域。使用@符号指定与视图中的数据的绑定。

transclude   ng-transclude

值为true时表示将页面自定义指令中的子元素添加到模板里带有 ng-transclude 属性的元素的下面

<!DOCTYPE html>

<html ng-app="myApp">

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <script src="../../Angular/angular.min.js"></script>

</head>

<body>

<div sidebox title="Links">

    <ul>

        <li>one</li>

        <li>two</li>

        <li>three</li>

    </ul>

</div>

<div ng-controller="myController">

    <div sidebox title="ttt">

        <a href="">{{data}}</a>

        <a href="">ddddd</a>

        <a href="">dddd</a>

        <a href="">dddd</a>

        <a href="">ddddd</a>

    </div>

</div>

<script>

    angular.module("myApp",[])

            .controller("myController",function($scope){

                $scope.data = "大厨的笔记"

            })

            .directive("sidebox",function(){

                return{

                    restrict:"EA",

                    scope:{

                        title:'@'

                    },

                    transclude:true,

                    template:'<div class="sidebox">' +

                             '   <div>' +

                             '       <h2>{{title}}</h2>' +

                             '       <span ng-transclude>' +//把自定义指令里的代码放到带有ng-transclude指令的地方

                             '       </span>' +

                             '   </div>' +

                             '</div>'

                }

            })

</script>

</body>

</html>

controller

值是一个字符串表示在指定自定义指令的控制器字符串就是对应的控制器的名字，值还可以是一个函数，表示当前指令的一个匿名控制器。

<!DOCTYPE html>

<html ng-app="myApp">

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <script src="../../Angular/angular.min.js"></script>

</head>

<body>

<div my-directive title="123333">

</div>

<div chef-controller>

</div>

<script>

    angular.module("myApp",[])

            //控制器

            .controller("myController",function($scope){

                $scope.data = "自定义指令的指定控制器"

            })

            //自定义指令指定控制器的名字

            .directive("myDirective",function(){

                return{

                    restrict:'A',

                    scope:{},

                    //指定自定义指令的控制器名字

                    controller:'myController',

                    template:'<a>{{title}}</a><span>{{data}}</span>'

                }

            })

            //指定自定义指令的匿名控制器

            .directive("chefController",function(){

                return{

                    restrict:"A",

                    scope:{

                        title:'@'

                    },

                    template:'<a>{{title}}</a>',

                    //指令内部的匿名控制器

                    controller:function($scope){

                        $scope.title = "内部定义匿名控制器";

                    }

                }

            })

</script>

</body>

</html>

Anaular指令详解的更多相关文章

  1. [转]JVM指令详解（上）

    作者:禅楼望月(http://www.cnblogs.com/yaoyinglong) 本文主要记录一些JVM指令,便于记忆与查阅. 一.未归类系列A 此系列暂未归类. 指令码    助记符      ...

  2. C#中的预处理器指令详解

    这篇文章主要介绍了C#中的预处理器指令详解,本文讲解了#define 和 #undef.#if.#elif.#else和#endif.#warning和#error.#region和#endregio ...

  3. rsync指令详解

    rsync指令详解(更详细的看官方文档http://rsync.samba.org/ftp/rsync/rsync.html) [root@Centos epel]# rsync --help rsy ...

  4. #pragma 预处理指令详解

    源地址:http://blog.csdn.net/jx_kingwei/article/details/367312 #pragma  预处理指令详解              在所有的预处理指令中, ...

  5. 迈向angularjs2系列(2):angular2指令详解

    一:angular2 helloworld! 为了简单快速的运行一个ng2的app,那么通过script引入预先编译好的angular2版本和页面的基本框架. index.html: <!DOC ...

  6. LDM与STM指令详解

    title: LDM与STM指令详解 date: 2019/2/26 17:58:00 toc: true --- LDM与STM指令详解 指令形式如下,这里的存储方向是针对寄存器的 Load Mul ...

  7. C#中的预处理指令详解

    这篇文章主要介绍了C#中的预处理指令详解,本文讲解了#define 和 #undef.#if.#elif.#else和#endif.#warning和#error.#region和#endregion ...

  8. pragma comment的使用 pragma预处理指令详解

    pragma comment的使用 pragma预处理指令详解   #pragma comment( comment-type [,"commentstring"] ) 该宏放置一 ...

  9. Docker技术入门与实战 第二版-学习笔记-3-Dockerfile 指令详解

    前面已经讲解了FROM.RUN指令,还提及了COPY.ADD,接下来学习其他的指令 5.Dockerfile 指令详解 1> COPY 复制文件 格式: COPY  <源路径> .. ...

随机推荐

  1. HttpCache缓存扩展方法

    using System;using System.Collections;using System.Configuration;using System.Web;using System.Web.C ...

  2. HDU 3791二叉搜索树解题(解题报告)

    1.题目地址: http://acm.hdu.edu.cn/showproblem.php?pid=3791 2.参考解题 http://blog.csdn.net/u013447865/articl ...

  3. jquery_DOM笔记3

    css 操作: css()设置或者返回匹配元素的样式 height() 设置或者返回匹配元素的高度 width() 设置或者返回匹配元素的宽度 offset()设置或者返回匹配元素相对于文档的相对位置 ...

  4. 从sum()求和引发的思考

    sum()求和是一个非常简单的函数,以前我的写法是这样,我想大部分和我一样刚开始学习JS的同学写出来的也会是这样. function sum() { var total=null; for(var i ...

  5. react+redux官方实例TODO从最简单的入门（5）-- 查

    上一篇文章<改>实现了,最后一个功能--<查>! 这个查是稍微要复杂一点的功能,官方实现的就是一个过滤数组的效果,然后展示出来,这里有3个状态,all,completed,ac ...

  6. zabbix自定义key

    zabbix自定义key 1.修改客户端配置文件 #vi /opt/zabbix/etc/zabbix_agentd.conf Include=/opt/zabbix/etc/zabbix_agent ...

  7. U3D学习笔记1: HelloWorld

    Unity 版本: 5.3.5.f1 Hello World工程 1.新建工程 HelloWorld U3D可选2D和3D游戏   2.新建C#脚本文件 在project栏的assets目录右键-&g ...

  8. Moving Average from Data Stream

    Given a stream of integers and a window size, calculate the moving average of all integers in the sl ...

  9. 我常用的那些linux命令

    我常用的那些linux命令 用linux也有些年头了,说来也忏愧,说是有些年头了,其实也还是个不长进的主.记得第一次接触linux是boss跟我说的怎么操作,什么编辑模式,按i,a,o进入编辑模式.在 ...

  10. tornado 异步调用系统命令和非阻塞线程池

    项目中异步调用 ping 和 nmap 实现对目标 ip 和所在网关的探测 Subprocess.STREAM 不用担心进程返回数据过大造成的死锁, Subprocess.PIPE 会有这个问题. i ...