目录：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. NSIS检测.NET Framework并在线下载

    Section -.NET Framework ;检测是否是需要的.NET Framework版本 Call GetNetFrameworkVersion Pop $R1 ;${If} $R1 < ...

  2. maven+ssm+cxf3配置例子

    以下只是简单记录 ssm结合cxf3的配置 提供方配置::: pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0&quo ...

  3. Open Xml 读取Excel中的图片

      在我的一个项目中,需要分析客户提供的Excel, 读出其中的图片信息(显示在Excel的第几行,第几列,以及图片本身). 网络上有许多使用Open Xml插入图片到Word,Excel的文章, 但 ...

  4. mysql使用load导入txt文件所遇到的问题及解决方法

    导入txt文件,有导入向导这种方式: 另外可以使用load的方式导入.最开始使用以下代码插入: load data local infile 'F:\\Data\\predict_data.txt' ...

  5. xml编辑器

    cstring转cha型方法在mfc中用过可行 int CstringToch(CString str, char *ch) { assert(ch); memset(ch, 0, sizeof(ch ...

  6. 全部leetcode题目解答（不含带锁）

    (记忆线:当时一刷完是1-205. 二刷88道.下次更新记得标记不能bug-free的原因.)   88-------------Perfect Squares(完美平方数.给一个整数,求出用平方数来 ...

  7. Activity系列讲解---数据传递

    在Android中,不同的Activity实例可能运行在一个进程中,也可能运行在不同的进程中.因此需要一种特别的机制帮助我们在Activity之间传递消息.Android中通过Intent对象来表示一 ...

  8. python print及格式化

    print(value,sep=' ',end='\n',file=sys.stdout, flush=False) sep=' '默认空格 print('hello','world') #hello ...

  9. Excel2013 基本用法（下）

    排序 按行/列排序 选择单元格,点击"排序"(点击之后自动全选) 点击选项,弹出"排序选项",根据自己需要选择按行排序/按列排序. 输入排序条件. 确定. 复杂 ...

  10. 【java回调】java两个类之间的回调函数传递

    背景交代:熟悉用js开发的cordovaAPP:对java一窍不通的我,老师让做一个监测用户拍照事件的功能,无奈没有找到现成的库,无奈自己动手开发java插件~~0基础java GreenHand,祝 ...