目录：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. Oracle的外部表

    一.外部表特性 数据文件位于操作系统之外,并且具有一定的格式分割的文本文件或其他类型文件.ORACLE的外部表通过SQL的形式访问数据文件中的数据,数据并不需要加载到数据库中且数据是可读的,所以不用D ...

  2. CentOS系统IPTables防火墙中FTP规则设置

    时间 2016-04-21 10:32:15  虫虫开源 原文  http://www.sijitao.net/2403.html 主题 iptablesFTP防火墙 在设置ftp通过iptables ...

  3. apache极简配置虚拟机

    在apache的httpd.conf文件最后添加: Listen 81<VirtualHost *:81> DocumentRoot E:/CM/wx_shop/ecshop</Vi ...

  4. 数据库阿里连接池 druid配置详解

    http://blog.csdn.net/hj7jay/article/details/51686418 http://lj6684.iteye.com/blog/1770093 http://www ...

  5. 【备忘】Conky配置

    贴配置: background yes use_xft yes xftfont Sans:size= xftalpha 0.8 update_interval own_window yes own_w ...

  6. Gcc的Makefile简单使用

    Gcc的Makefile简单使用http://blog.chinaunix.net/uid-9330295-id-2425867.html

  7. vmare centos 6.8 minimal 无法上网

    主机:win7 工具:vmare 11.0.0 系统:http://mirrors.163.com/centos/6.8/isos/x86_64/CentOS-6.8-x86_64-minimal.i ...

  8. Android二维码的生成，解析以及扫描功能

    <1> 布局只有2个按钮,实现生成二维码和解析二维码 <Button android:layout_width="wrap_content" android:la ...

  9. C语言移位算符">>"

    右移算符>>是将二进制数的每一位右移.如:a=32,a>>2,就是将32的二进制数100000每一个二进制位向右移动两位.得到的是二进制数1000,也就是8. #include ...

  10. java工程积累——前台页面的统一校验

    对比: 1,以前的页面验证代码 <span style="font-size:18px;">//为了验证就医单号是否为空          var isDBNull = ...