AngularJs自定义指令的详解

1.angularJs中提供了很多内置指令,它还有很强大的功能就是自定义指令

指令:我们可以理解为在特定DOM上运行的函数,指令可以控制这个元素的功能,正是指令使得angularJs这个框架变得强大

我们可以用directive()这个方法用来定义指令

directive()指令可以接受两个参数

1> name(字符串)指令的名字用来在视图中引用特定的指令

2>factory_function(函数) :这个函数返回的是一个对象,其中定义了指令的全部行为.

2.定义指令行为的相关属性键值对

angular.module('myApp', [])
.directive('myDirective', function() {
return {

//它告诉AngularJS这个指令在DOM中可以何种形式被声明默认是是A 以属性的形式进行声明
restrict: String,
priority: Number,//优先级
terminal: Boolean,//这个参数用来告诉AngularJS停止运行当前元素上比本指令优先级低的指令
template: String or Template Function: //一段HTML文本；
function(tElement, tAttrs) (...},
templateUrl: String,//用于将’其他html’文件渲染进入含有对应指令的html中。当然这里的’其他html’里面可以有我们的指令或者表达式，其实就是代码段，和在当前页面一样使用，只是抽离出去了，方便管理。这里会用异步请求的方式来得到这个文件。注意：此处会发送一个xhr请求。
replace: Boolean or String,//，如果设置了这个参数，值必须为true，因为默认值为false。默认值意味着模板会被当作子元素插入到调用此指令的元素内部：
scope: Boolean or Object, 比如scope :true 如果为true 则指令模板可以访问外部作用域的或 scope :{} 这样指令模板无法访问外部作用域主要因为隔离作用域的原因
transclude: Boolean,
controller: String or
function(scope, element, attrs, transclude, otherInjectables) { ... },
controllerAs: String,可以给controller 起个别名简化操作
require: String,require参数可以被设置为字符串或数组，字符串代表另外一个指令的名字。require会将控制器注入到其值所指定的指令中，并作为当前指令的链接函数的第四个参数。
link: function(scope, iElement, iAttrs) { ... },//进行DOM 操作
compile: // 返回一个对象或连接函数，如下所示：
function(tElement, tAttrs, transclude) {
return {
pre: function(scope, iElement, iAttrs, controller) { ... },
post: function(scope, iElement, iAttrs, controller) { ... }
}
// 或者
return function postLink(...) { ... }

<!DOCTYPE html>
<!-- 这里是初试化anglularJs 的一个应用程序 -->
<html>
<head>
<meta charset="UTF-8">
<title>初识自定义指令</title>
<script type="text/javascript" src="js/angular-1.3.0.js"></script>
</head>
<body><div ng-app="myApp"><div ng-include="child.html"></div><div my-info name="names"add="changeData(name)"></div></div>
</body>
<script type="text/javascript">//在自定义标签中定义行为
     angular.module('myApp').directive('myInfo', function(){return {restrict: 'EA', //E表示element, A表示attribute,C表示class，M表示commnent,即注释
             scope:{name: '@' //@读属性值，=双向绑定，&用户函数
                 add:'&'//允许外部scope传递一个函数给封闭的scope
             }template: '<div>{{ name }}</div>'+'<button ng-click="action()">Change Data</button>',templateUrl: 'app/sample.html',controller: function($scope){$scope.changeData=function(){//调用外部的scope的函数                   var name="good data";//给函数传参
                     $scope.add({name:name });}},link:function($scope, element, attrs){}//DOM操作
         };})
//注意 默认情况下,自定义的directive是共享父scope,但是有时候我们希望自定义的directive的scope是封闭的,独立的
//比如下网自定的directive用在多处.
// 1.使用@,外部赋值不影响封闭scope的变量
// 2.使用=,外部scope赋值会影响封闭scope变量
// 3.使用&，允许外部scope传递一个函数给封闭scope  这个函数还可以传入相应的参数
// 4.允许自定义的directive被嵌套 要把tranclude设置为true就可以了.</script>
</html>

转载于:https://www.cnblogs.com/hu-bo/p/6429707.html

AngularJs自定义指令的详解相关推荐

vue自定义指令（详解）
vue自定义指令,核心就是需要自己亲手去操作DOM 而vue中的内置指令例如v-model只不过是vue帮你动了dom上的display属性, 所以自定义指令,就是自己亲手对原生操作dom进行了一次封 ...
angular 自定义指令参数详解
restrict:指令在dom中的声明形式 E(元素)A(属性)C(类名)M(注释) priority优先级:一个元素上存在两个指令,来决定那个指令被优先执行 terminal:true或false, ...
AngularJS自定义指令详解（有分页插件代码）
前言除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 通过 .directive() 函数来添加自定义的指令. 调用自定义指令时,需要在HTMl 元素上添加自定义指令名. 自定义指 ...
object类中的equals与自定义equals方法详解
object类中的equals与自定义equal方法详解 1.this怎么理解?this == obj表示什么? this就是当前你new出来的对象,这里指谁调用equal方法this指的就是谁,ob ...
AngularJS - 自定义指令
这一篇从自定义指令出发,记录了定义一个指令时影响指令行为的各种因素. 试着感受这些因素,让自己更高效地编写AngularJS应用. Directive 先从定义一个简单的指令开始. 定义一个指令本质上 ...
android标尺自定义view,android尺子的自定义view——RulerView详解
项目中用到自定义尺子的样式: 原效果为因为跟自己要使用的view稍有不同所以做了一些修改,修改的注释都放在代码中了,特此记录一下. 首先是一个自定义View: public class RuleV ...
mysql： union / union all / 自定义函数用法详解
mysql: union / union all http://www.cnblogs.com/wangyayun/p/6133540.html mysql:自定义函数用法详解 http://www. ...
（119）System Verilog 父类与子类对象复制（自定义函数）详解
(119)System Verilog 父类与子类对象复制(自定义函数)详解 1.1 目录 1)目录 2)FPGA简介 3)System Verilog简介 4)System Verilog 父类与子 ...
ARM指令CMP详解
ARM指令CMP详解 1.加减指令 add r1, r ...
python权限管理系统_Django 自定义权限管理系统详解(通过中间件认证)
1. 创建工程文件, 修改setting.py文件 django-admin.py startproject project_name 特别是在 windows 上,如果报错,尝试用 django-a ...

AngularJs自定义指令的详解

AngularJs自定义指令的详解相关推荐

最新文章

热门文章