angularjs 中directive自定义指令介绍

发布时间：2020-12-17 08:45:28 所属栏目：安全来源：网络整理

导读：angularjs中的自定义指令一：自定义指令的介绍作用: 增强HTML标签的功能自定义HTML标签在原生JS中,可以将公共的代码封装成函数在angularjs中,可以将公共的HTML结构封装成自定义标签操作DOM 在angularjs中,页面中的DOM与数据是有对应关系的对数据做增

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的目的
语法：
- 如何定义一个最基本的自定义指令
```
模块对象.directive('指令名称',[function(){
    return {
        // 指令的具体配置
    }
}])
```
- 指令在HTML中的使用
```

<div my-btn></div>
<my-btn></my-btn>
<div class="my-btn"></div>

```
- 指令的配置参数介绍
  - 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操作的地方
```
模块对象.directive('指令名称',[function(){
    return function(){
        // 此处写具体的DOM操作
    }
}])
```

示例如下：

<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的绑定

自定义控件绑定$scope分为 @，=，& 三种情况。个人认为@:单向绑定，=：双向绑定，
  &: 用于绑定函数，下面看看Angularjs权威指南的介绍
	@  本地作用域属性：使用@符号将本地作用域同DOM属性的值进行绑定。
       也可以指定属性名，查找的是指定属性还不是之前的someProperty了！！！
        scope: {
            someProperty: '@someAttr'
        }
	=  双向绑定：通过=可以将本地作用域上的属性同父级作用域上的属性进行双向的数据绑定。 
就像普通的数据绑定一样，本地属性会反映出父数据模型中所发生的改变
	&  父级作用域绑定 通过&符号可以对父级作用域进行绑定，以便在其中运行函数。
意味着对这个值进行设置时会生成一个指向父级作用域的包装函数.

<!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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!