目录：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. FPGA优化之高扇出

    Fanout即扇出,模块直接调用的下级模块的个数,如果这个数值过大的话,在FPGA直接表现为net delay较大,不利于时序收敛.因此,在写代码时应尽量避免高扇出的情况.但是,在某些特殊情况下,受到 ...

  2. CSS3 Media Queries 实现响应式设计

    在 CSS2 中,你可以为不同的媒介设备(如屏幕.打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能.你可以为媒介类型添加某些条件,检测设 ...

  3. linux 下串口独占方式打开

    参考文章: http://blog.csdn.net/rl529014/article/details/51336161  http://blog.csdn.net/lin_fs/article/de ...

  4. C++ 操作XML文件 使用MSXML.DLL

    使用MSXML.DLL读写XML; 文件顶部加入 #import "msxml3.dll"; using namespace MSXML2; //这两句作用是,在程序的文件夹下生成 ...

  5. 3D 素材路径

    https://3dwarehouse.sketchup.com/user.html?id=1058361951245355501624136&nav=likedcollections

  6. CI 扩展 Service

    CI 扩展 Service 说明 CodeIgniter是一套典型的MVC框架,M负责数据,C负责交互,V负责视图,但是随着业务逻辑越来越复杂, 必然会涉及到一些列操作过程,例如用户下订单,就会存在校 ...

  7. iOS常用第三方开源框架和优秀开发者博客等

    博客收藏iOS开发过程好的开源框架.开源项目.Xcode工具插件.Mac软件.文章等,会不断更新维护,希望对你们有帮助.如果有推荐或者建议,请到此处提交推荐或者联系我. 该文档已提交GitHub,点击 ...

  8. Jquary入门（ 修改内容）

    1. 使用JQ时需要先引用 JQ 包: 其他的JQ代码 需要写在 引用标签的下面如下图[基本格式] JQ中 是纯代码 没有判断 没有循环   如果 有 时间间隔和延迟  则使用JS 代码 详见 下面例 ...

  9. 在ubuntu下安装google chrome

    由于手上有两台电脑,再加上我那个选择困难症加上纠结劲.所以果断把其中一台电脑只装linux系统,另一台电脑只装windows了.免得我老纠结!于是linux便选择了ubuntu. 由于浏览器一直用的是 ...

  10. useradd与adduser的区别

    useradd与adduser都是创建新的用户 在CentOs下useradd与adduser是没有区别的都是在创建用户,在home下自动创建目录,没有设置密码,需要使用passwd命令修改密码. 而 ...