angular自定义指令,意我们可以通过angula自己定义指令,来实现我们的特殊要求,为所欲为,一支穿云箭,千军万马来相见

多少年的老规矩了,先看代码:

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>test</title>
</head>
<body ng-app="myApp">
<my-title></my-title>    //元素my-title
<div my-title></div> //属性my-title
<div class="my-title"></div>//类my-title
<!-- directive: my-title -->//注释my-title(注意一定要加directive)
<script src="angular.min.js"></script>
<script>
var app = angular.module("myApp", []) app.directive("myTitle", function(){ //myTitle与上面的my-title对应, 这里要写驼峰式,上面写 - 式
return {
restrict: 'ECMA', //指令作用域,E表示作用于元素,C表示作用于类(class),M表示作用于注释,A表示作用于元素属性
template: '<h1>还有谁</h1>', //模板,将模板内容显示在对应区域(按照restrict显示)
22 replace: true       //用模板标签替换掉注释标签,使得注释内容能在网页内显示出来 (即:设置为true可以替换标签,false只能替换文本内容)
}
}) </script>
</body>
</html>

transclude

transclude可以将被替换掉的文本内容显示到指定位置,用法如下:

transclude: true; ng-transclude;配合使用

 <div my-title>德莱联盟</div>
 app.directive("myTitle", function(){
return {
restrict: 'AM',
template: '<span><div ng-transclude>德莱联盟</div>德玛西亚</span>',
replace: true,
transclude: true
}
})

templateUrl

通过templateUrl可以用外部文本、标签替换内部文本、标签,注:要在localhost协议下测试

app.directive("myTitle", function(){
return {
restrict: 'AM',
templateUrl: 'time.html' //加入外部文件url
}
})

如上,我们可以通过自定义指令,来渲染页面,当然自定义指令也可以加在控制器里,这时控制器作用域作为父作用域,如下:

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>test</title>
</head>
<body ng-app="myApp">
<my-title></my-title>
<div my-title></div>
<div class="my-title"></div>
<!-- directive: my-title -->
<div ng-controller="myCtr">
<input type="text" ng-model="msg">
<p my-title msg-data="{{msg}}">{{msg}}</p>
<h1>{{msg}}</h1>
</div> <script src="angular.min.js"></script>
<script>
var app = angular.module("myApp", [])
.controller('myCtr', function($scope){
$scope.msg = "德玛西亚";
})
.directive("myTitle",function(){
return {
restrict: 'A',
controller: function($scope){
$scope.msg = "还有谁";
},
scope: true      //默认是false,表示其作用域和父作用域相同,当为true时表示他们有各自的作用域互不干扰
}
}) </script>
</body>
</html>

看上面代码,不难发现angularJS支持连缀,这是因为angular的方法会返回一个对象即上面的"app",所以其可以像jQuery一样连缀

scope还可以是一个对象,如:

  template: '<em>{{msg}}</em>', //将父作用域msg变斜体后以模板的形式加载到子作用域

  scope: {
msg: '@msgData' //对应上面代码的msg-data,其功能是将子作用域msg指向父作用域msg,便于上一步中的模板加载操作
}

这样一来,子作用域的p标签也会渲染为 "德玛西亚"

通过上面分析,我们发现可不可以在自定义指令中自定义方法呢?答案是可疑的,那就是link闪亮登场的时候了,我的大刀早已饥渴难耐了!!!

代码:

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>test</title>
</head>
<body ng-app="myApp">
<div repeat-num="3">我爱中华 //自定义指令,将div重复渲染3次 </div> <script src="angular.min.js"></script>
<script>
var app = angular.module("myApp", []); app.directive("repeatNum", function(){
return {
restrict: 'A',
link: function(m,T,bc) {    //这三个参数是通过console.log(this);console.log(arguments);来查看的
var num = bc.repeatNum;  //获取上面repeat-num的值
console.log(this);
console.log(arguments);
for(var i = 0; i < num; i++){ //for循环实现多次渲染
var cDom = T.clone(); //克隆div
T.after(cDom); //将克隆好的div加在现有的div之后
}
} }
}) </script>
</body>
</html>

Angular自定义指令(directive)-LMLPHP

如上图所示link方法共有5个参数其中三个是:m、T、bc,m表示作用域,T表示自定义指令作用的元素即div,bc表示其属性

当然了我们也可以对其子元素自定义操作,即多次渲染等,如下代码片段:

 <div repeat-num="3">
<h1>我以为你不会选我呢</h1>
</div>
app.directive("repeatNum", function(){
return {
restrict: 'A',
link: function(m,T,bc) {
var num = bc.repeatNum;
var cDom = T.children();   //找到自定义指令操作元素的子节点
for(var i = 0; i < num; i++){
T.append(cDom.clone()); //将其子元素克隆并加入父元素
}
}
}
})

上述即为自定义指令的用法,欢迎再次光临召唤师峡谷。

女士们、先生们,today is history, today we make history, today is part of history.

05-11 09:42
查看更多