站长统计幸福宝宝官方,哪个cms做企业网站好,天津高端网站,wordpress和帝国cms哪个好AngularJS 指令#xff08;Directives#xff09;实践指南(1) 2014-03-12 10:22 陈鑫伟 编译 伯乐在线我要评论(0)字号#xff1a;T|T一个指令用来引入新的HTML语法。指令是DOM元素上的标记#xff0c;使元素拥有特定的行为。举例来说#xff0c;静态的HTML不知道如何来创…AngularJS 指令Directives实践指南(1) 2014-03-12 10:22 陈鑫伟 编译 伯乐在线 我要评论(0) 字号T | T 一个指令用来引入新的HTML语法。指令是DOM元素上的标记使元素拥有特定的行为。举例来说静态的HTML不知道如何来创建和展现一个日期选择器控件。让HTML能识别这个语法我们需要使用指令。指令通过某种方法来创建一个能够支持日期选择的元素。我们会循序渐进地介绍这是如何实现的。 ADWOT2014课程推荐实战MSA用开源软件搭建微服务系统 指令Directives是所有AngularJS应用最重要的部分。尽管AngularJS已经提供了非常丰富的指令但还是经常需要创建应用特定的指令。这篇教程会为你讲述如何自定义指令以及介绍如何在实际项目中使用。在这篇文章的最后第二部分我会指导你如何使用Angular指令来创建一个简单的记事本应用。 概述 一个指令用来引入新的HTML语法。指令是DOM元素上的标记使元素拥有特定的行为。举例来说静态的HTML不知道如何来创建和展现一个日期选择器控件。让HTML能识别这个语法我们需要使用指令。指令通过某种方法来创建一个能够支持日期选择的元素。我们会循序渐进地介绍这是如何实现的。 如果你写过AngularJS的应用那么你一定已经使用过指令不管你有没有意识到。你肯定已经用过简单的指令比如 ng-mode, ng-repeat, ng-show等。这些指令都赋予DOM元素特定的行为。例如ng-repeat 重复特定的元素ng-show 有条件地显示一个元素。如果你想让一个元素支持拖拽你也需要创建一个指令来实现它。指令背后基本的想法很简单。它通过对元素绑定事件监听或者改变DOM而使HTML拥有真实的交互性。 jQuery视角 想象一下使用jQuery如何创建一个日期选择器。首先我们在HTML中添加一个普通的输入框然后通过jQuery调用 $(element).dataPicker() 来将它转变成一个日期选择器。但是仔细想一下。当一个设计人员过来检查HTML标记的时候他/她能否立刻猜到这个字段实际上表示的内容这只是一个简单的输入框或者一个日期选择器你需要查看jQuery代码来确定这些。而Angular的方法是使用一个指令来扩展HTML。所以一个日期选择器的指令可以是下面的形式 input typetext / 或者是这样 input typetext / 这种创建UI组建的方式更加直接和清晰。你可以轻易地通过查看元素就明白这到底是什么。 创建自定义指令 一个Angular指令可以有以下的四种表现形式 1. 一个新的HTML元素data-picker/data-picker 2. 元素的属性input type”text” data-picker/ 3. CSS classinput type”text” class”data-picker”/ 4. 注释!–directive:data-picker – 当然我们可以控制我们的指令在HTML中的表现形式。下面我们来看一下AngularJS中的一个典型的指令的写法。指令注册的方式与 controller 一样但是它返回的是一个拥有指令配置属性的简单对象(指令定义对象) 。下面的代码是一个简单的 Hello World 指令。 var app angular.module(myapp, []); app.directive(helloWorld, function() { return { restrict: AE, replace: true, template: h3Hello World!!/h3 }; }); 在上面的代码中app.directive()方法在模块中注册了一个新的指令。这个方法的第一个参数是这个指令的名字。第二个参数是一个返回指令定义对象的函数。如果你的指令依赖于其他的对象或者服务比如 $rootScope, $http, 或者$compile他们可以在这个时间被注入。这个指令在HTML中以一个元素使用如下 hello-world/ //OR hello:world/ 或者以一个属性的方式使用 div hello-world/div //OR div hello:world/ 如果你想要符合HTML5的规范你可以在元素前面添加 x- 或者 data-的前缀。所以下面的标记也会匹配 helloWorld 指令 div data-hello-world/div //OR div x-hello-world/div 注意 在匹配指令的时候Angular会在元素或者属性的名字中剔除 x- 或者 data- 前缀。 然后将 – 或者 : 连接的字符串转换成驼峰(camelCase)表现形式然后再与注册过的指令进行匹配。这是为什么我们在HTML中以 hello-world 的方式使用 helloWorld 指令。其实这跟HTML对标签和属性不区分大小写有关。 尽管上面的指令仅仅实现了静态文字的显示但是这里还是有一些有趣的点值得我们去挖掘。我们在指令定义过程中使用了三个属性来配置指令。我们来一一介绍他们的作用。 restrict – 这个属性用来指定指令在HTML中如何使用还记得之前说的指令的四种表示方式吗。在上面的例子中我们使用了 ‘AE’。所以这个指令可以被当作新的HTML元素或者属性来使用。如果要允许指令被当作class来使用我们将 restrict 设置成 ‘AEC’。template – 这个属性规定了指令被Angular编译和链接link后生成的HTML标记。这个属性值不一定要是简单的字符串。template 可以非常复杂而且经常包含其他的指令以及表达式({{ }})等。更多的情况下你可能会见到 templateUrl 而不是 template。所以理想情况下你应该将模板放到一个特定的HTML文件中然后将 templateUrl 属性指向它。replace – 这个属性指明生成的HTML内容是否会替换掉定义此指令的HTML元素。在我们的例子中我们用 hello-world/hello-world的方式使用我们的指令并且将 replace 设置成 true。所以在指令被编译之后生成的模板内容替换掉了 hello-world/hello-world。最终的输出是 h3Hello World!!/h3。如果你将 replace 设置成 false也就是默认值那么生成的模板会被插入到定义指令的元素中。打开这个 plunker在”Hello World!!”右键检查元素内容来更形象地明白这些。 Link函数和Scope 指令生成出的模板其实没有太多意义除非它在特定的scope下编译。默认情况下指令并不会创建新的子scope。更多的它使用父scope。也就是说如果指令存在于一个controller下它就会使用这个controller的scope。 如何运用scope我们要用到一个叫做 link 的函数。它由指令定义对象中的link属性配置。让我们来改变一下我们的 helloWorld 指令当用户在一个输入框中输入一种颜色的名称时Hello World 文字的背景色自动发生变化。同时当用户在 Hello World 文字上点击时背景色变回白色。 相应的HTML标记如下 body ng-controllerMainCtrl input typetext ng-modelcolor placeholderEnter a color / hello-world/ /body 修改后的 helloWorld 指令如下 app.directive(helloWorld, function() { return { restrict: AE, replace: true, template: p stylebackground-color:{{color}}Hello World, link: function(scope, elem, attrs) { elem.bind(click, function() { elem.css(background-color, white); scope.$apply(function() { scope.color white; }); }); elem.bind(mouseover, function() { elem.css(cursor, pointer); }); } }; }); 我们注意到指令定义中的 link 函数。 它有三个参数 scope – 指令的scope。在我们的例子中指令的scope就是父controller的scope。elem – 指令的jQLite(jQuery的子集)包装DOM元素。如果你在引入AngularJS之前引入了jQuery那么这个元素就是jQuery元素而不是jQLite元素。由于这个元素已经被jQuery/jQLite包装了所以我们就在进行DOM操作的时候就不需要再使用 $()来进行包装。attr – 一个包含了指令所在元素的属性的标准化的参数对象。举个例子你给一个HTML元素添加了一些属性那么可以在 link 函数中通过 attrs.someAttribute 来使用它。link函数主要用来为DOM元素添加事件监听、监视模型属性变化、以及更新DOM。在上面的指令代码片段中我们添加了两个事件 click和 mouseover。click 处理函数用来重置 p 的背景色而 mouseover 处理函数改变鼠标为 pointer。在模板中有一个表达式 {{color}}当父scope中的 color 发生变化时它用来改变 Hello World 文字的背景色。 这个 plunker 演示了这些概念。 AngularJS 指令Directives实践指南(2) 2014-03-12 10:22 陈鑫伟 编译 伯乐在线 我要评论(0) 字号T | T 一个指令用来引入新的HTML语法。指令是DOM元素上的标记使元素拥有特定的行为。举例来说静态的HTML不知道如何来创建和展现一个日期选择器控件。让HTML能识别这个语法我们需要使用指令。指令通过某种方法来创建一个能够支持日期选择的元素。我们会循序渐进地介绍这是如何实现的。 ADWOT2014课程推荐实战MSA用开源软件搭建微服务系统 compile函数 compile 函数在 link 函数被执行之前用来做一些DOM改造。它接收下面的参数 tElement – 指令所在的元素attrs – 元素上赋予的参数的标准化列表要注意的是 compile 函数不能访问 scope并且必须返回一个 link 函数。但是如果没有设置 compile 函数你可以正常地配置 link 函数有了compile就不能用linklink函数由compile返回。compile函数可以写成如下的形式 app.directive(test, function() { return { compile: function(tElem,attrs) { //do optional DOM transformation here return function(scope,elem,attrs) { //linking function here }; } }; }); 大多数的情况下你只需要使用 link 函数。这是因为大部分的指令只需要考虑注册事件监听、监视模型、以及更新DOM等这些都可以在 link 函数中完成。 但是对于像 ng-repeat 之类的指令需要克隆和重复 DOM 元素多次在 link 函数执行之前由 compile 函数来完成。这就带来了一个问题为什么我们需要两个分开的函数来完成生成过程为什么不能只使用一个要回答好这个问题我们需要理解指令在Angular中是如何被编译的 指令是如何被编译的 当应用引导启动的时候Angular开始使用 $compile 服务遍历DOM元素。这个服务基于注册过的指令在标记文本中搜索指令。一旦所有的指令都被识别后Angular执行他们的 compile 方法。如前面所讲的compile 方法返回一个 link 函数被添加到稍后执行的 link 函数列表中。这被称为编译阶段。如果一个指令需要被克隆很多次比如 ng-repeatcompile函数只在编译阶段被执行一次复制这些模板但是link 函数会针对每个被复制的实例被执行。所以分开处理让我们在性能上有一定的提高。这也说明了为什么在 compile 函数中不能访问到scope对象。 在编译阶段之后就开始了链接linking阶段。在这个阶段所有收集的 link 函数将被一一执行。指令创造出来的模板会在正确的scope下被解析和处理然后返回具有事件响应的真实的DOM节点。 改变指令的Scope 默认情况下指令获取它父节点的controller的scope。但这并不适用于所有情况。如果将父controller的scope暴露给指令那么他们可以随意地修改 scope 的属性。在某些情况下你的指令希望能够添加一些仅限内部使用的属性和方法。如果我们在父的scope中添加会污染父scope。 其实我们还有两种选择 一个子scope – 这个scope原型继承子父scope。一个隔离的scope – 一个孤立存在不继承自父scope的scope。这样的scope可以通过指令定义对象中 scope 属性来配置。下面的代码片段是一个例子 app.directive(helloWorld, function() { return { scope: true, // use a child scope that inherits from parent restrict: AE, replace: true, template: h3Hello World!!/h3 }; }); 上面的代码让Angular给指令创建一个继承自父socpe的新的子scope。 另外一个选择隔离的scope app.directive(helloWorld, function() { return { scope: {}, // use a new isolated scope restrict: AE, replace: true, template: h3Hello World!!/h3 }; }); 这个指令使用了一个隔离的scope。隔离的scope在我们想要创建可重用的指令的时候是非常有好处的。通过使用隔离的scope我们能够保证我们的指令是自包含的可以被很容易的插入到HTML应用中。 它内部不能访问父的scope所保证了父scope不被污染。 在我们的 helloWorld 指令例子中如果我们将 scope 设置成 {}那么上面的代码将不会工作。 它会创建一个新的隔离的scope那么相应的表达式 {{color}} 会指向到这个新的scope中它的值将是 undefined. 使用隔离的scope并不意味着我们完全不能访问父scope的属性。其实有一些技术可以允许我们访问父scope的属性甚至监视他们的变化。我们会在指令这个系列的第二部分中讨论这些技术以及一些更高级的概念比如 Controller 函数。 第二部分也会和你一起使用Angular指令创建一个较为丰富的记事本应用。 所以请保持关注。 转载于:https://www.cnblogs.com/xihuafeiyu/articles/3747157.html
