今天好大的雨啊！上一节中，我们的指令中的工厂函数中都是返回了一个叫做链接函数的工人函数，事实上我们的工厂函数也是可以返回一个对象，这个对象里面可以包含很多的属性，这使得我们可以创建更加强大的指令。

一、link属性

　　这个属性的值是一个函数，叫做链接函数。

  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="myApp">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>link</title>
  6. </head>
  7. <body ng-controller="directiveCtrul">
  8.     <h1 get-data id="dff" class="haha"></h1>
  9.  
  10.     <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
  11.     <script type="text/javascript">
  12.         angular.module('myApp',[])
  13.         .controller('directiveCtrul',function($scope){
  14.             $scope.data = "你好啊！";
  15.         })
  16.         .directive("getData",function(){
  17.             return {
  18.                 link:function(scope,element,attrs){
  19.                     console.log(scope['data']);
  20.                 }
  21.             }
  22.         })
  23.     </script>
  24. </body>
  25. </html>

　　有木有发现这跟上文中的第一个例子几乎完全相同，只是将那个返回的函数放到了一个对象的link属性中。

二、restrict

　　restrict属性定义了我们的指令应该被怎样使用。E表示作为一个元素，A表示用作一个属性，C表示用作一个类，M表示用作一个注释 。

　　

  1. directive("getData",function(){
  2.             return {
  3.                 link:function(scope,element,attrs){
  4.                     console.log(scope['data']);
  5.                 },
  6.                 restrict:"ECA"
  7.             }
  8.         })

<h1 get-data id="dff" class="haha"></h1><!-- 用作属性A -->
<get-data></get-data> <!-- 用作元素E -->
<h1 class="get-data"></h1> <!-- 用作类C -->

　　假如用错了会怎样？如果你不是通过指令获取数据的，那么只是不工作而已;另外，如果你依赖了指令，那么可能会引用错误。

三、 template，templateUrl

　　都是用来指定一个模板的。

　　

  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="myApp">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>link</title>
  6. </head>
  7. <body ng-controller="directiveCtrul">
  8.     <div get-data="data" id="dff" class="haha"></div><!-- 用作属性A -->
  9.     <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
  10.     <script type="text/javascript">
  11.         angular.module('myApp',[])
  12.         .controller('directiveCtrul',function($scope){
  13.             $scope.data = "你好啊！";
  14.         })
  15.         .directive("getData",function(){
  16.             return {
  17.                 link:function(scope,element,attrs){
  18.                     scope.data = scope[attrs['getData']];
  19.                 },
  20.                 restrict:"A",
  21.                 template:"<h1>{{data}}</h1>"
  22.             }
  23.         })
  24.     </script>
  25. </body>
  26. </html>

　　还阔以用函数指定模板

　　

  1. directive("getData",function(){
  2.             return {
  3.                 link:function(scope,element,attrs){
  4.                     scope.data = scope[attrs['getData']];
  5.                 },
  6.                 restrict:"A",
  7.                 template:function(){return "<h1>{{data}}</h1>"}
  8.             }
  9.         })

　　看看指定一个外部模板

　　

  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="myApp">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>link</title>
  6. </head>
  7. <body ng-controller="directiveCtrul">
  8.     <div get-data="data" id="dff" class="haha"></div><!-- 用作属性A -->
  9.     <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
  10.     <script type="text/javascript">
  11.         angular.module('myApp',[])
  12.         .controller('directiveCtrul',function($scope){
  13.             $scope.data = "你好啊！";
  14.         })
  15.         .directive("getData",function(){
  16.             return {
  17.                 link:function(scope,element,attrs){
  18.                     scope.data = scope[attrs['getData']];
  19.                 },
  20.                 restrict:"A",
  21.                 templateUrl:'h.html'
  22.             }
  23.         })
  24.     </script>
  25. </body>
  26. </html>

　　在我们的同级目录中有个叫做h.html的文件，里面定义了我们的模板。这个外部模板实际上是发起了一次ajax请求，将请求的文件添加到了指定位置。

　　

四、replace

　　这个属性决定了我们的运用指令的那个元素是否应该被替换掉。

　　举个例子，上面的那个测试生成的和结构是这样的

　　但我们将replace属性置为true时，结构就是这样的了

　　看到没，那个div没了。

　　本文到此结束，我决定将作用域的管理放到下一篇文章，因为我决定先休息一下。　　

AngularJS1.X学习笔记9-自定义指令（中）的更多相关文章

  1. AngularJS1.X学习笔记8-自定义指令（上）

    AngulaJS的指令是一种非常强大的特性,一个ng-repeat就能让我们非常方便的展示一个数据列表,指令相当于是一个组件,为我们将一些东西封装起来了,提供了复用的可能性.个人认为自定义指令还是比较 ...

  2. AngularJs学习笔记3——自定义指令

    指令 概述: 前面也说过一些常用指令,用于快速入门.现在详细总结一下:指令用于实现各种页面的操作,是对于底层DOM操作的封装,扩展了HTML的行为,实现页面交互以及数据绑定. 指令是一种执行的信号,一 ...

  3. AngularJS学习笔记(四) 自定义指令

    指令(directive)是啥?简单来说就是实现一定功能的XXX...之前一直用的ng-model,ng-click等等都是指令.当我有一个ng没提供的需求的时候,就可以自定义个指令.指令的好处显而易 ...

  4. AngularJS1.X学习笔记10-自定义指令（下）

    继续继续,学完这个部分就去吃饭.引用自由男人的话作为本文的开始:“默认情况下,链接函数被传入了控制器的作用域,而该控制器管理着的视图包含了指令所应用到的元素”.果然像是绕口令,还是看看你的例子比较好. ...

  5. Angularjs进阶笔记（2）-自定义指令中的数据绑定

    有关自定义指令的scope参数,网上很多文章都在讲这3种绑定方式实现的效果是什么,但几乎没有人讲到底怎么使用,本篇希望聊聊到底怎么用这个话题. 一. 自定义指令 自定义指令,是Angularjs用来实 ...

  6. ASP.NET MVC 学习笔记-7.自定义配置信息 ASP.NET MVC 学习笔记-6.异步控制器 ASP.NET MVC 学习笔记-5.Controller与View的数据传递 ASP.NET MVC 学习笔记-4.ASP.NET MVC中Ajax的应用 ASP.NET MVC 学习笔记-3.面向对象设计原则

    ASP.NET MVC 学习笔记-7.自定义配置信息   ASP.NET程序中的web.config文件中,在appSettings这个配置节中能够保存一些配置,比如, 1 <appSettin ...

  7. angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令

    在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...

  8. Hadoop学习笔记—5.自定义类型处理手机上网日志

    转载自http://www.cnblogs.com/edisonchou/p/4288737.html Hadoop学习笔记—5.自定义类型处理手机上网日志 一.测试数据:手机上网日志 1.1 关于这 ...

  9. angular学习笔记(三十)-指令(10)-require和controller

    本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...

随机推荐

  1. 用js实现左右阴影的切换

    <!doctype html><html><head><meta charset="utf-8"><title>无标题文 ...

  2. Red Hat Enterprise Linux7 配置Tomcat

    笔者是Java前端的一个萌新,电脑刚刚经历了一番脱胎换骨,然后重新装了Win10Pro,所有的开发工具都要重新安装,纠结了一番以后决定还是把一些开发工具从Windows上转移到Linux上,首先考虑了 ...

  3. PAT乙级-1036.跟奥巴马一起编程(15)

    题解 题解: 注意"行数是列数的50%(四舍五入)" #include<iostream> using namespace std; int main() { int ...

  4. QT自定义控件插件化简要概述

    1.选择 "其他项目"->"Qt4 设计师自定义控件" **最好选中所有的编译器平台,由于目前使用的Qt Creator是MSVC2015 32位,因此要 ...

  5. python计算机基础-Day1

    计算机基础-Day1 一.计算机基础 首先Python是一门编程语言 语言: 那什么是语言?语言就是一种事物与另一种事物沟通的介质. 所以说编程语言是程序员跟计算机沟通的介质,那么为什么要跟计算机沟通 ...

  6. Jmeter + Ant 测试环境搭建 及解决问题: the <jmeter> type doesn't support nested text data

    1.首先确保测试机器中已经按照jdk1.6以上版本,如果没有,那就上官网下载吧. 2.下载Ant,解压至指定目录,并配置好环境变量:http://ant.apache.org/ 在命令行下执行ant ...

  7. mySQL语法中的存储过程及if语句的使用简例

    create procedure gh() #注意各个地方的分号!此代码应先运行除掉最后一句的部分,然后运行call gh显示已经存储的结果 BEGIN declare c_no int; #声明数据 ...

  8. python爬微信公众号前10篇历史文章（6）-话说http cookies

    早期Web开发面临的最大问题之一是如何管理状态.简言之,服务器端没有办法知道两个请求是否来自于同一个浏览器.这是cookies的起源. 什么是cookie? A cookie is a small s ...

  9. python爬微信公众号前10篇历史文章（3）-lxml&xpath初探

    理解lxml以及xpath 什么是lxml? python中用来处理XML和HTML的library.与其他相比,它能提供很好的性能, 并且它支持XPath. 具体可以查看官方文档->http: ...

  10. Spring data Redis

    http://www.cnblogs.com/tankaixiong/p/3660075.html http://www.aboutyun.com/thread-20755-1-1.html