JavaScript框架之AngularJS学习——指令（二）

来源：互联网发布：程序员的简历怎么写编辑：程序博客网时间：2024/04/30 04:32

AngularJS学习——指令（二）

AngularJS学习——指令（一）

在指令（一）中我们学习过，自定义指令方法第二个参数为指令定义方法，该方法返回一个对象，即指令定义对象（Directive Definition Object, DOO）。指令（二）介绍一下指令定义对象其他属性和方法。

1.link方法

自定义指令中的template属性用于指定AngularJS指令被替换成的HTML模板。在HTML模板中我们可以使用AngularJS表达式{{ property }}形式。

eg:

如图中代码所示，在template中的HTML模板中，表达式{{ name }}输出作用域中的name属性，接着在控制器（controller）构造方法中通过$scope.name = "陈小名"在作用域中添加一个name属性。最终效果如：

图中的陈小名就是作用域中的name属性。

接着看，在上图代码中，我们的代码中的自定义指令如：

<say-hello name="chendaming"></say-hello>

自定义指令接受了一个name属性，我们需要将指令中的name属性放入自定义指令中，此时就可以通过link()方法来实现。具体如下:

<!DOCTYPE html><html lang="en" ng-app="myApp"><head><meta charset="UTF-8"><title>Document</title><script src="https://cdn.bootcss.com/angular.js/1.6.5/angular.js"></script></head><body><div ng-controller="myCtrl"><say-hello name = "chendaming"></say-hello></div><script>angular.module("myApp", []).directive("sayHello", [function(){return {restrict: "AECM",replace: true,template: "<h2>hello world! {{name}}</h2>",link: function(scope, elem, attr){scope.name = attr.name;}}}]).controller("myCtrl", ["$scope", function($scope){// $scope.name = "陈小名"}])</script></body></html>

link()方法，接受了三个参数（形参）。

a. scope参数：表示指令作用域，默认情况下和父级作用域相同。

b. elem参数：表示应用当前指令的HTML元素。例子中的<say-hello name="chendaming></say-hello>就是elem。

c. attrs参数：表示一个对象，包含指令的所有属性及属性值。例子中的name="chendaming"就是attr的属性和属性值，可以通过attr.name来获取。

例子中，我们通过attr.name获取name属性值，然后在作用域对象中添加一个name属性，然后在指令模板中通过AngularJS表达式{{ name }}将属性输出到页面，这样就实现了输出指令属性的功能。

link()方法还有如下用途：

需要获取或修改自定义指令属性时。
当指令需要监视AngularJS作用域模型数据变化时。
当指令需要相应HTML模板中元素单击、鼠标移动等事件时。

在link()方法中，我们还可以响应HTMO元素的事件和监视租用与模型数据变化

eg:

<!DOCTYPE html><html lang="en" ng-app="myApp"><head><meta charset="UTF-8"><title>Document</title><script src="https://cdn.bootcss.com/angular.js/1.6.5/angular.js"></script></head><body><div><!-- <sayHello></sayHello> --><say-hello></say-hello></div><script>angular.module("myApp", []).directive("sayHello", [function(){return {restrict: "AECM",replace: true,template: "<div><input type='text' ng-model='message'><h1>Hello world! {{ message }}</h1><button ng-click='clearMessage()'>清除message</button></div>",link: function(scope, elem, attr){scope.$watch("message", function(val){console.log("message change");});scope.clearMessage = function(){scope.message = "";}}}}])</script></body></html>

注：也可以将template换成templateUrl,但是好像在Chrome浏览器中会存在一些跨域访问的问题，建议测试还是用template，降低学习难度，你也可以将你的文件放入服务器进行测试。

然后结果如下：

当input输入框中的内容发生改变的时候，控制台中就会输出"message change"

然后通过button按钮就可以以清除输入框汇中所输入的内容

2.compile方法

AngularJS处理指令的过程——浏览器开始渲染HTML页面时，首先加载HTML元素、创建文档对象模型（DOM），加载完成后会触发onload事件。我们通过<script>标签将AngularJS库引入HTML页面中，AngularJS就会监听onload事件，然后从DOM元素中查找ng-app指令，如果找到就启动AngularJS框架，接着从ng-app指令所在的HTML标签开始使用$compile服务遍历DOM元素。我们使用directive()方法注册的指令都会保存在一个容器中，在AngularJS会从这些DOM元素中识别哪些属于指令元素，AngualrJS框架会根据指令定义对象决定如何处理这些指令。一旦有的指令被识别，就会执行指令定义对象的compile()方法。

所有指令的compile()方法只会在AngularJS框架启动时调用一次，该方法的定义如下：

compile: function(tElem, tAttrs){return {link: function(scope, iElem, iAttrs){}}}

compile()方法接受两个参数，含义如下：

tElem: 指令所在的元素
tAttrs: 指令元素的所有属性列表

注意：compile()方法和link()方法有冲突，如果指定了指定定义对象的compile()方法就不能在为指定定义对象增加link()方法，但是link()方法可以有compile()方法作为返回值返回（如果没有指定compile()方法，就可以正常使用link()方法）

compile()方法，大概只了解了这一点内容。

以上笔记整理自个人学习，用做个人学习分享

阅读全文

0 0