您的位置：首页 > Web前端 > AngularJS

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

2017-10-16 20:03 405 查看

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.mo
4000
dule("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()方法，大概只了解了这一点内容。

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航