自定义指令编译步骤

<图为一个元素上有2个指令的情况>

把指令标签转换为dom结构,执行complie方法,compile方法返回的就是Link函数,所以如果指令配置了compile方法,就不需要再配置Link方法了,

compile方法有3个参数tElement,tAttrs,transclude,tElement是该指令标签的JQuery对象,transclude是原始数据里的内容

compile:function(tElement,tAttrs,transclude){

  tElement.append(angular.element("<div>content</div>"));//这种方式可以给该标签增加内容

  return {pre:function(scope,iElement,iAttrs,controller){},post:function(scope,iElement,iAttrs,controller){}}//这就是Link方法,它包含两个属性,pre指在指令连接到子元素之前运行该方法,post指令连接到子元素之后运行该方法

}

一般compile方法用来改变dom结构,link方法用来给该指令元素绑定事件,Link方法包含4个参数scope,iElement,iAttrs,controller

Link:function(scope,iElement,iAttrs,controller){//scope是当前指令元素的作用域

  iElement.on(‘click‘,function(){

    scope.$apply(function(){ //在控制器里改变视图模板里的内容必须用脏检查$apply方法,除非该元素用了ng-model指令绑定了数据

        scope.user.name=‘new name‘;

    })

  })

}

时间: 2024-10-22 21:28:56

自定义指令编译步骤的相关文章

走进AngularJs(四)自定义指令----(中)

上一篇简单介绍了自定义一个指令的几个简单参数,restrict.template.templateUrl.replace.transclude,这几个理解起来相对容易很多,因为它们只涉及到了表现,而没有涉及行为.这一篇将继续学习ng自定义指令的几个重量级参数,了解了它们之后我们的custom directive将不光能"看",还要能"动".开始~ 理解compile和link 不知大家有没有这样的感觉,自己定义指令的时候跟写jQuery插件有几分相似之处,都是先预先

C/C++程序编译步骤以及如何生成可执行文件

一.开篇 许久不碰关于这方面的知识了,前几天同学开课提及到该部分,正好作为回顾吧. C/C++语言很多人都比较熟悉,这基本上是每位大学生必学的一门编程语言,通常还都是作为程序设计入门语言学的,并且课程大多安排在大一(反正我是混过来的).刚上大学,学生们还都很乖,学习也比较认真.用心.所以,C/C++语言掌握地也都不错(说的是你么),不用说编译程序,就是写个上几百行的程序都不在话下,但是他们真的知道C/C++程序编译的步骤么? 很多人都不是很清楚吧,如果接下来学过"编译原理",也许能说个

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

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

angular自定义指令命名的那个坑

Directive 先从定义一个简单的指令开始. 定义一个指令本质上是在HTML中通过元素.属性.类或注释来添加功能.AngularJS的内置指令都是以ng开头,如果想自定义指令,建议自定义一个前缀代表自己的命名空间.这里我们先使用my作为前缀: var myApp = angular.module('myApp', []) .directive('myDirective', function() { return { restrict: 'A', replace: true, template

走进AngularJs(五)自定义指令----(下)

自定义指令学习有段时间了,学了些纸上谈兵的东西,还没有真正的写个指令出来呢...所以,随着学习的接近尾声,本篇除了介绍剩余的几个参数外,还将动手结合使用各参数,写个真正能用的指令出来玩玩. 我们在自定义指令(上)中,写了一个简单的<say-hello></say-hello>,能够跟美女打招呼.但是看看人家ng内置的指令,都是这么用的:ng-model="m",ng-repeat="a in array",不单单是作为属性,还可以赋值给它,与

11-Angular的自定义指令以及实例

前面的文章介绍了很多angular自带的指令,下面我们看看如何使用directive自定义指令. 先看一个例子: <body> <div my-hello></div> </body> <script type="text/javascript"> var m1 = angular.module('myApp',[]); m1.directive('myHello',function(){ return { restrict

AngularJS:如何使用自定义指令来取代ng-repeat

引言 本文主要介绍了另一种即具有与ng-repeat 一样处理大量数据的绑定的功能,又具有超高的性能. 对于处理小数量,ng-repeat是非常有用的,但是如果需要处理非常大的数量集,还是采用自定义的方法更好一些. 也别是数据大多都是静态的或已预存储好的,这个时候应避免使用ng-repeat指令. ng-repeat中的表达式和 $watch Angular中的表达式都会创建$watch 的Scope 函数.用于监听模型变化,当你的模型部分发生变化时它会通知你.在ng-repeat指令中,如果某

AngularJs ng-repeat指令中怎么实现含有自定义指令的动态html

今天用angular写table的时候,遇到了一个问题.在ng-repeat中,含有动态的html,而这些html中含有自定义指令. 因为希望实现一个能够复用的table,所以定义了一个指令myStandTable,指令代码大概如下: 1 var myCommon = angular.module("myCommon",[]); 2 myCommon.directive("myStandTable", function () { 3 return { 4 restr

Vue.js学习 Item13 – 指令系统与自定义指令

基础 除了内置指令,Vue.js 也允许注册自定义指令.自定义指令提供一种机制将数据的变化映射为 DOM 行为. 可以用 Vue.directive(id, definition) 方法注册一个全局自定义指令,它接收两个参数指令 ID 与定义对象.也可以用组件的 directives 选项注册一个局部自定义指令. 钩子函数 定义对象可以提供几个钩子函数(都是可选的): bind:只调用一次,在指令第一次绑定到元素上时调用. update: 在 bind 之后立即以初始值为参数第一次调用,之后每当