自定义指令

directives.js 存放 自定义标签

strict
require
scope
link

接收两个参数
第一个参数表示自定义指令的名称(在页面中使用-分隔单词，在自定义指令中通过驼峰式命名)
第二个参数表示自定义指令处理函数
返回值是一个对象， 用来描述我们自定义指令的

描述自定义指令的对象有一些属性
restrict表示自定义指令的类型，四大类ECMA，这四类书写顺序是任意的，可以组合使用
E:自定义元素类型的自定义指令
语法 <my-title></my-title>

C:class类自定义指令
语法 <div class="my-title"></div>

M:注释指令（应用很少）
语法 <!-- dirctive:my-title -->

A:元素属性自定义指令
语法 <div my-title></div>

template 表示自定义指令模板
replace 表示是否替换该元素（dom中的元素是否删除）

时间： 2025-01-01 22:56:47

自定义指令的相关文章

第二节：指令的使用（6）——自定义指令

1.指令定义的钩子函数:(这些钩子函数都是可选的) bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作. inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中). update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化.通过比较更新前后的绑定值,可以忽略不必要的模板更新. componentUpdated: 被绑定元素所在模板完成一次更新周期时调用,即模版更新完成的调用. unb

Vue2.0 - 自定义指令 vue-directive

Vue.directive('指令',function(el,binding,vnode){ el.style='color:'+binding.value;}); el : 指令所绑定的元素,可以用来直接操作DOM.. binding: 一个对象,包含指令的很多信息. 自定义指令有五个生命周期: >1.bind :  只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个绑定时执行一次的初始化动作. >2.inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存

Angularjs[25] - 自定义指令（1）（restrict, template, replace）

自定义指令: module.directive(name,directiveFactory) @see $compileProvider.directive() ??  不要使用 ng 为指令,若指令名为 xxx-yyy,在设置指令名时应为 xxxYyy 即驼峰命名法. restrict: 可以任意组合四种风格,如果忽略 restrict,默认为A. 字母 风格 示例 E 元素 <my-dir></my-dir> C 样式类 <span class="my-dir:

AngularJS笔记--自定义指令

在前端开发中, 我们会遇到很多地方都会用到同一种类型的控件.AngularJS提供了自定义指令功能,我们可以在指令里面定义特定的html模板.提供给前台html调用. 一. 指令的简单定义.  下面定义了一个简单的控件,点击后调转到博客园. Note: 1.命名方式:directive必须以小写字母开头,其中如果后面由大写字母,html调用的时候就要用 - 将单词分开. <html> <script src='angular.js'></script> <scri

带你走近AngularJS - 创建自定义指令

为什么使用AngularJS 指令? 使用过 AngularJS 的朋友应该最感兴趣的是它的指令.现今市场上的前端框架也只有AngularJS 拥有自定义指令的功能,并且AngularJS 是目前唯一提供Web应用可复用能力的框架. 目前有很多JavaScript 产品提供插件给Web开发人员.例如, Bootstrap 就是当前比较流行的提供样式和JavaScript插件的前端开发工具包.但是开发人员在使用Booostrap中的插件时, 必须切换到JavaScript 模式来写 jQuery

Vue 自定义指令练习

Vue.directive(id,definition)注册一个全局自定义指令,接收两个参数,指令ID以及定义对象 取值: <div v-demo="{ color: 'white', text: 'hello!' }"></div> Vue.directive("demo", function (el, binding) { alert(binding.value.color); alert(binding.value.text); })

vue学习(二)：自定义过滤器和自定义指令

#自定义指令 自定义指令的参数有: el: 指令所绑定的元素,可以用来直接操作 DOM . binding: 一个对象,包含以下属性: name: 指令名,不包括 v- 前缀. value: 指令的绑定值, 例如: v-my-directive="1 + 1", value 的值是 2. oldValue: 指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用.无论值是否改变都可用. expression: 绑定值的字符串形式. 例如 v-my-di

angular的自定义指令---详解

1.angualr指令 在angualr自己里面有许多丰富的指令,但都是平时所常见的,但对于自己所需要的可能有所欠缺,所以自己可能会摒弃原声指令,自己封装更为健壮灵活的指令: 其实angular里面的指令也是基于下面所用到的步骤来创建的,只不过他都添加到了全局中,所以可以直接使用: 2.创建自定义指令 首先创建模块app,再使用app的服务directive方法, 创建指令内容第一个参数自定义的名字,第二个参数是自定义参数属性对象,该对象包括的属性基本在代码注释解释清楚: // a.创建模块 v

angularJs工作日记-自定义指令Directive01

新项目组使用完善的angularMVVM设计思路架构,很庆幸能够来到这个项目组,在这里的每一天都能够学习到新的知识,为了防止以后忘记,记录一下个人的理解 首先接触最多的是directive,directive目前用到了以下几个属性, restrict,scope,link,templateUrl 首先是restrict:这个无需多说,用来定义自定义指令的使用形式,包括A属性,E标签,C是class,M是备注,最常用的就是EA,尤其是E可以在标签中使用自定义属性传参给父controller,或者定