angularjs中的自定义指令
一：自定义指令的介绍
-
作用:
- 增强HTML标签的功能
- 自定义HTML标签
- 在原生JS中,可以将公共的代码封装成函数
- 在angularjs中,可以将公共的HTML结构封装成自定义标签
- 操作DOM
- 在angularjs中,页面中的DOM与数据是有对应关系的
- 对数据做增删操作,页面中的DOM会自动增加删除
- DOM的增删是由angularjs通过指令完成的,比如ng-repeat,ng-if,ng-switch
- 如果开发人员要对页面中的DOM做额外的操作
- 需要等待angularjs的操作完成以后进行
- 但是开发人员是不知道angularjs的操作什么时候完成的
- 不过angularjs自己是知道的
- 所以angularjs推荐开发人员也通过指令进行DOM操作
- 当内部提供的指令执行完成以后,它会去调用开发人员定义的指令
- 这样就达到了在angularjs操作完DOM以后开发人员再去操作DOM的目的
-
语法：
@H_301_52@模块对象.directive('指令名称',[function(){
return {
// 指令的具体配置
}
}])
@H_301_52@<!-- 指令名称:myBtn -->
<div my-btn></div>
<my-btn></my-btn>
<div class="my-btn"></div>
<!-- directive:my-btn -->
-
指令的配置参数介绍
- restrict 自定义指令分类
- 属性指令 A attribute
- 元素指令 E element
- 样式指令 C class
- 注释指令 M comment
- 默认值是:'AE'
- template和templateUrl使用方法
- template 模板字符串
- templateUrl 定义angular模板
- link函数的作用及参数说明
- 作用：写DOM操作的地方
- 有三个参数 scope element attributes
- scope:类似于$scope 作用范围不同 只针对当前指令生效
- element:当前指令所要操作的元素
- attributes:当前指令所在标签的属性结合 对象类型
- replace的作用
- 将当前指令所在的标签删除掉
- 布尔类型的值 默认是是false 不删除
- transclude的作用
- 如果指令所在标签内部有内容 会将内容保存到ng-transclude中
- 然后在模板内将ng-transclude保存的内容写在想要显示的位置即可
- 默认值是false 不保存原有内容 也就是直接用模板内容替换原有内容
- scope的作用
- false 默认值 指令没有单独的作用域 继承父级作用域
- true 使指令具有单独的作用域 继承父级作用域
- {} 使指令具有单独的作用域 不继承父级作用域
-
自定义指令的简写形式
- 当定义的指令全部使用默认参数 仅需要一个写DOM操作的地方
@H_301_52@模块对象.directive('指令名称',[function(){
return function(){
// 此处写具体的DOM操作
}
}])
示例如下：
@H_
301_52@<body ng-app="myApp">
<div my-Dir="blue">DIV</div>
<script src="node_modules/angular/angular.js"></script>
<script>
var app = angular.module('myApp',[]);
app.directive("myDir",[function(){
return {
restrict:"AE",templateUrl:"helloTpl",//引入模板
内容
transclude:true,//将之前
自定义标签内的
内容保存到ng-transclude
replace:true,//
删除自定义标签，注意：
删除了定义
标签，模板内的多个
标签必须有一个父
标签包裹，否则报错
link:function(scope,element,attributes){
// scope:
标签的作用域 -->作用等同于$scope
// element:jqLite对象
// attributes：当前指令所在元素的
属性集合
element.css("background","blue");
}
}
}])
</script>
<script type="text/ng-template" id="helloTpl">
<div>
<span><b ng-transclude ng-click="clickFn()"></b>你好,欢迎来到angularjs的世界</span>
<p>我是段落
标签</p>
</div>
</script>
</body>
二、深入理解自定义控件scope的绑定
@H_
301_52@
自定义控件绑定$scope分为 @，=，& 三种情况。个人认为@:单向绑定，=：双向绑定，
&: 用于绑定
函数，下面看看Angularjs权威指南的介绍
@ 本地作用域
属性：使用@符号将本地作用域同DOM
属性的值进行绑定。
也可以指定
属性名，查找的是指定
属性还不是之前的someProperty了！！！
scope: {
someProperty: '@someAttr'
}
= 双向绑定：通过=可以将本地作用域上的
属性同父级作用域上的
属性进行双向的数据绑定。
就像普通的数据绑定一样，本地
属性会反映出父数据模型中所发生的改变
& 父级作用域绑定 通过&符号可以对父级作用域进行绑定，以便在其中运行
函数。
意味着对这个值进行设置时会
生成一个指向父级作用域的包装
函数.
@H_
301_52@<!DOCTYPE html>
<html lang="en">
<head>
<
Meta charset="UTF-8">
<title>angularjs demo</title>
</head>
<body ng-app="myApp" ng-controller="demoCtrl">
<div my-dir msg="{{msg}}" person="person" show="show()"></div>
<script src="node_modules/angular/angular.js"></script>
<script>
/*
scope : false 指令没有单独的作用域 并且会继承父级作用域
scope : true 指令拥有单独的作用域 并且会继承父级作用域
scope : {} 指令拥有单独的作用域 不会继承父级作用域
@ 去指令所在的元素身上找有没有一个叫做msg的同名
属性 如果有 将同名
属性的值 赋值给当前指令内部的msg
通过@取到的数据 无论你看它像什么类型的都好 其实它都是字符串
= 去指令所在的元素身上找有没有一个叫做person的同名
属性 如果有 将同名
属性的值 赋值给当前指令内部的person
& 去父级作用域中匹配同名的
函数，说白了，就是在
自定义指令作用中，
调用父级
方法
*/
var app=angular.module("myApp",[])
//
添加自定义属性
.directive("myDir",[function(){
return {
restrict:"A",scope:{
msg:"@",person:"=",show:"&"
},templateUrl:"tpl"
}
}])
.controller("demoCtrl",["$scope",function($scope){
$scope.msg = "我是控制器中的msg";
$scope.person = ['Jack','Rose','lilei','hanmeimei'];
$scope.show=function(){
alert("1");
}
}])
</script>
<script type="text/ng-template" id="tpl">
<button ng-click="show()">{{msg}}</button>
<div ng-repeat="item in person">{{item}}</div>
</script>
</body>
</html>
