angularjs 自定义指令

除了 AngularJS 内置的指令外,我们还可以创建自定义指令。
你可以使用 .directive 函数来添加自定义的指令。

1./创建指令

app.directive(‘指令的名称’,function(){
return {
template:指定要显示的模板内容
restrict: “EAC” //E(Element)A(Attribute)C(Class)M(Comment)//(默认为EA)
replace: true,替换并显示出来
scope://通过scope传递参数
}
})
指令的命令规则:指令的名称由两部分构成,前缀:一般使我们模块或者项目的名字缩写; 后缀:用来描述指令的功能。
注意的是angularjs内置指令都是由ng-开头的。为了区分是自定义指令不建议以ng-开头。

自定义指令的参数:

restrict: 说明指令在HTML中的应用形式,备选项有”A”、”E” 和 “C”, “M” ,分别代表 attribute、element、class和comment(默认值为”A”)。我们将更多的关注attributes-如何创建UI元素。
scope: 创建指令的作用范围,scope在指令中作为属性标签传递。Scope 是创建可以复用指令的必要条件,每个指令(不论是处于嵌套指令的哪一级)都有其唯一的作用域,它不依赖于父scope。scope 对象定义names 和types 变量。上面的例子即创建了3个scope变量。
name: “@” (值传递,单向绑定):
“@”符号表示变量是值传递。指令会检索从父级scope中传递而来字符串中的值。指令可以使用该值但无法修改,是最常用的变量。
amount: “=” (引用,双向绑定)
“=”符号表示变量是引用传递。指令检索主Scope中的引用取值。值可以是任意类型的,包括复合对象和数组。指令可以更改父级Scope中的值,所以当指令需要修改父级Scope中的值时我们就需要使用这种类型。
save: “&” (表达式)
“&”符号表示变量是在父级Scope中启作用的表达式。它允许指令实现比修改值更高级的操作。
template: 替代原始模板中的标记的字符串。替换功能将替换所有旧元素为新值。注意template是如何使用Scope中定义的变量的。这允许你无需写任何额外的代码即可创建macro-style 风格指令。replace: 说明是否替换原始标记中的值或是追加原始标记中的值。默认值是false,这时原始标记将被保留。
transclude: 说明自定义指令是否复制原始标记中的内容。例如,之前展示的“tab”指令设置了transclude 为 true,因为tab 元素包含其他HTML 元素。 “dateInput” 指令则需要在初始化时为空,所以需要设置transclude 为false。
link: 该方法在指令中扮演着重要的角色。它负责执行DOM 操作和注册事件监听器等。link 方法包含以下参数:
scope: 指令Scope的引用。scope 变量在初始化时是不被定义的,link 方法会注册监视器监视值变化事件。
element: 包含指令的DOM元素的引用, link 方法一般通过jQuery 操作实例(如果没有加载jQuery,还可以使用Angular’s jqLite )。
controller: 在有嵌套指令的情况下使用。这个参数作用在于把子指令的引用提供给父指令,允许指令之间进行交互, tab 指令就是使用该参数较典型的例子:http://jsfiddle.net/powertoolsteam/GBE7N/1/
注意,当调用link 方法时, 通过值传递(”@”)的scope 变量将不会被初始化,它们将会在指令的生命周期中另一个时间点进行初始化,如果你需要监听这个事件,可以使用scope.$watch 方法。

2、如何使用自定义的指令??

注意事项:指令在命名时是要遵循驼峰式命名规则;在使用时要遵循烤串式用方
‘tsHello’ –> ts-hello
根据配置指令时的restrict属性所对应的值,在合适的场景下使用指令。
你可以通过元素名,属性,类,注释来调用属性如

3、自定义指令传递参数

怎么传?
在调用指令的时候可以传 将参数作为属性对应的值
怎么接受?
scope

### 创建和使用AngularJS自定义指令 #### 定义自定义指令AngularJS中,通过`module.directive()`方法来注册一个新的指令。此函数接受两个参数:第一个是指令名称;第二个是一个返回配置对象的工厂函数。 ```javascript var app = angular.module('myApp', []); app.directive('myDirective', function() { return { restrict: 'E', template: '<div>A Custom Directive</div>', replace: true, link: function(scope, element, attrs) {} }; }); ``` 上述代码片段展示了如何创建一个名为`<my-directive>`的新HTML标签[^1]。 #### 使用属性、类名或注释作为指令触发器 除了可以将指令定义为元素外,还可以将其设置为仅限于特定类型的声明方式——即A(属性),C(类),M(注释): ```javascript return { restrict: 'ACME' // A - Attribute, C - Class, E - Element name, M - Comment }; ``` #### 数据绑定与交互 为了使指令能够接收外部数据并作出响应,在链接函数内可以通过第三个参数访问这些传入的数据(称为attributes)。同时也可以利用双向绑定机制让父作用域中的变量自动更新子组件的状态变化。 ```html <!-- HTML --> <div my-directive="expression"></div> ``` ```javascript // JavaScript link: function(scope, elem, attr){ scope.$watch(attr.myDirective,function(newValue){ /* ... */ }); } ``` #### 高级特性 对于更复杂的场景,则可能需要用到编译期(compilation phase)处理逻辑以及控制器(controller)概念。这允许开发者分离关注点,并实现更加模块化的开发模式。 - **Compile Function**: 编写预处理器逻辑,用于修改DOM结构之前的操作。 - **Controller As Syntax**: 推荐做法之一就是采用controller as语法糖形式编写控制器部分,从而提高可读性和维护性。 ```javascript app.directive('complexDir', function(){ var controller = ['$scope','$element','$attrs',function($scope,$elem,$attr){ $scope.doSomething = function(){/*...*/}; }]; return{ restrict:'EA', templateUrl:'/path/to/template.html', controller:controller, controllerAs:'vm' } }) ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值