Anaular指令详解

目录: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>
时间: 2024-10-03 00:34:36

Anaular指令详解的相关文章

迈向angularjs2系列(2):angular2组件和指令详解

<%= INIT %> 内容 一:angular2 helloworld! 为了简单快速的运行一个ng2的app,那么通过script引入预先编译好的angular2版本和页面的基本框架. index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> &l

Git大法好——2.Git本地操作指令详解

Git大法好--2.Git本地操作指令详解 引言 上节给大家讲解了有关于Git的一些概念,Git的引入,Git的四个组成部分,Git文件的状态,以及 Git的下载安装:前面也讲过Git和SVN有个明显的差别就是,Git可以不需要网络就可以进行版本 控制,这是因为Git中每个电脑都拥有一个本地的版本库,而远程的仓库仅仅是作为我们交换修改 的一个工具!即使失去这个工具,我们也可以干活,只是交换修改不方便罢了,假如是SVN,远程 服务器挂了-所以,我们使用Git的时候大部分时间都是在进行Git的一些本

[转]JVM指令详解(上)

作者:禅楼望月(http://www.cnblogs.com/yaoyinglong) 本文主要记录一些JVM指令,便于记忆与查阅. 一.未归类系列A 此系列暂未归类. 指令码    助记符                            说明 0x00         nop                                什么都不做 0x01        aconst_null                   将null推送至栈顶 二.const系列 该系列命令主要

tar 指令详解

tar 解压缩命令 tar -c: 建立压缩档案 -x:解压 -t:查看内容 -r:向压缩归档文件末尾追加文件 -u:更新原压缩包中的文件 这五个是独立的命令,压缩解压都要用到其中一个,可以和别的命令连用但只能用其中一个.下面的参数是根据需要在压缩或解压档案时可选的. -z:有gzip属性的 -j:有bz2属性的 -Z:有compress属性的 -v:显示所有过程 -O:将文件解开到标准输出 下面的参数-f是必须的 -f: 使用档案名字,切记,这个参数是最后一个参数,后面只能接档案名. # ta

&lt;linux下sysctl指令详解&gt;

Sysctl指令是对系统核心参数的设置: 用法: -a 参数列出系统中所有核心设置 当然了这些核心的设置都是文件,存放于/proc/sys/net目录下. 举个有代表性的例子: net.ipv4.icmp_echo_ignore_all = 0      把所有的点改为 / 就可以了.   [[email protected] net]# net.ipv4.icmp_echo_ignore_all = 0 [[email protected] net]# cd ipv4/ [[email pro

16位汇编第六讲汇编指令详解第二讲

16位汇编第六讲汇编指令详解第二讲 1.比较指令 CMP指令 1.CMP指令是将目的操作数减去源操作数,按照定义相应的设置状态标志 2.CMP指令执行的功能与SUB指令(相减指令)一样,但是不同的是CMP指令之根据结果设置标志位 而不修改值 可以操作的指令格式 CMP reg,imm/reg/mem CMP mem,imm/reg 上面是CMP指令的语法,具体的也可以查询帮助文档,inter手册 inter手册查的办法 第一个框代表了CMP指令的所有语法 比如 reg,reg 表示可以比较寄存器

16位汇编第五讲各种指令详解第一讲

汇编指令详解 8080指令详解 1.8086系统下,Inter指令系统共有117条指令(看似很多,分一下类) 1.数据传送类指令(专门传送数据的) 2.算术运算类指令(加减乘除的运算的) 3.位操作类指令(或  异货 与 -.) 4.串操作类指令 (内存拷贝,内存连续地址拷贝的操作) 5.控制转移类指令(跳转,比如C语言的Goto) 6.处理机控制类指令(计算机的待机 ,重启 等等,让CPU待机睡眠的指令) 学习指令的注意事项 1.指令的功能,也就是这个指令可以实现什么操作.通常的话,指令就是指

Linux指令详解useradd groupadd passwd chpasswd chage 密码修改

创建用户.设置密码.修改用户.删除用户: useradd testuser 创建用户testuser passwd testuser 给创建的用户testuser设置密码 说明:新创建的用户会在/home下创建一个用户目录testuser usermod --help 修改用户这个命令的相关参数 userdel testuser 删除用户testuser rm -rf testuser 删除用户testuser所在目录 上面的几个命令只有root账号才可以使用,如果你不知道自己的系统上面的命令在

iret指令详解

在"实地址模式"中,IRET 指令执行到中断程序或过程的远返回.在执行此操作的过程中,处理器从堆栈将返回指令指针.返回代码段选择器以及 EFLAGS 映像分别弹入 EIP.CS 以及 EFLAGS 寄存器,然后恢复执行中断的程序或过程. 在"保护模式"中,IRET 指令的操作取决于以下因素:EFLAGS 寄存器中 NT(嵌套任务)与 VM 标志的设置,以及当前堆栈中存储的 EFLAGS 映像中的 VM 标志的设置.根据这些标志的设置,处理器执行以下类型的中断返回: