目录：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. ASP.NET知识总结 （未完） 本人新手

    1:HTTP的工作方式是什么?1)客户端提交表单请求处理 Request2)服务器端处理程序进行处理 Handle3)服务端相应 Response 2:1)get(默认值)是通过地址栏的URL显式地传 ...

  2. #ThinkPHP_3.2.2模型# where查询条件汇总

    特别喜欢 ThinkPHP_3.2.3 框架的Model,结合官方手册及查看源代码,汇总出其大体用法: 核心转换方法: $this->parseWhere($where); $whereStr ...

  3. windows安装redis

    下载安装包,由于redis不提供windows版本,但是通过官网了解,如下: The Redis project does not officially support Windows. Howeve ...

  4. 【Android】Android属性allowBackup安全风险

    allowBackup值为true或false,Android API Level 8及其以上Android系统提供了为应用程序数据的备份和恢复功能,当allowBackup标志为true时,用户即可 ...

  5. （总结）隐藏PHP版本与PHP基本安全设置

    为了安全起见,最好还是将PHP版本隐藏,以避免一些因PHP版本漏洞而引起的攻击. 1.隐藏PHP版本就是隐藏 “X-Powered-By: PHP/5.2.13″ 这个信息. 方法很简单:编辑php. ...

  6. cstring to char *例子

    Cstring m_strDescPath = ""; //类的成员变量 //"打开文件"对话框,选择文件,返回其路径 m_strDescPath = Boot ...

  7. ExecutorService线程池

    ExecutorService 建立多线程的步骤: 1.定义线程类 class Handler implements Runnable{} 2.建立ExecutorService线程池 Executo ...

  8. Owin Self Host

    http://owin.org/ Owin 定义了webserver和webapplication之间的标准接口,目标就是为了解耦webapplication对webserver的依赖, 就是说以后可 ...

  9. jQuery的select相关操作

    例: <select class="selector" id="selector"></select> 1.设置value为pxx的项选 ...

  10. ACM/ICPC 之 有流量上下界的网络流-Dinic(可做模板)(POJ2396)

    //有流量上下界的网络流 //Time:47Ms Memory:1788K #include<iostream> #include<cstring> #include<c ...