关于Angular 指令的理解

之前虽然一直都在用这套框架,但是对于指令还是知之甚少,感觉是蛮复杂的东西。看了之后也没有真正理解。

最近在做一个Angular的小项目,卡在了Angular的生命周期和自定义指令上。纠结了好几天,终于今天在地铁上灵光一闪想通了。所以赶紧把它记下来,免得后面忘记了。

我们一直都说angular的加载流程是先载入HTML片段,其中在加载<script>标签的时候加载了所有的JS库,包括我们自己写的所有的controller/service/filter以及官方的angular库.

加载完angular库之后,他会自动寻找HTML其中的ng-app指令节点,创建rootscope作用域,但是是如何加载里面的控制器的呢?

首先我们要理解 ng-controller 本身和ng-app 和 ng-if ...一样也是一个指令,只不过这个指令比较特殊,因为他有一个单独的控制器方法。

这里的情景应该就和我们平时写自定义指令里面用到的 transclude
一样,transclude的作用就是保留指令所在节点里面的子节点内容。

ng-app在编译的时候也是一样,他默认保留了ng-app所在节点的子节点,然后去寻找其中的ng-controller 指令,并且把之前读取到的控制器方法传入了对应的ng-controller上面,也就是实现ng-controller指令的编译,接下来ng-controller里面的指令编译就都交给了对应的控制器方法,他会继承rootscope生成一个子scope作用域。

接下来我们说一下控制器里面的指令是如何编译的。

首先,同样的ng-controller
指令内部也有HTML片段,里面包含了各种各样的指令有官方的,也有我们自定义的。因为控制器内部变量已经在上面绑定的时候初始化过了,然后把对应的变量赋值给里面对应的指令中,如果是官方内置的那就不用我们去操心编译和双向绑定,但是如果是我们自定义指令的话 那就需要我们自己来根据传入的变量决定如何处理这个指令实现他的compile/link方法了。

最后,同一级的指令编译永远都会在当前所在控制器方法初始化的后面。

也就是 初始化 控制器 然后看 子节点有没有指令
有的话就对该指令进行编译,没有就结束了 。

以上均不考虑双向绑定的实现

时间: 2024-08-03 23:05:16

关于Angular 指令的理解的相关文章

jquery函数转为angular指令实现示例

最初像想要实现的是:显示如下的小星星 最初的实现方式是在html页面加JS脚本,但是老外不喜欢这样,一定要我们转为angular指令,所以就试试呗~ 一.最初的实现方式 <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <meta content="IE=edge,chrome=1&quo

【转】angular指令入坑

独立作用域和函数参数 通过使用本地作用域属性,你可以传递一个外部的函数参数(如定义在控制器$scope中的函数)到指令.这些使用&就可以完成.下面是一个例子,定义一个叫做add的本地作用域属性用来保存传入函数的引用: angular.module('directivesModule').directive('isolatedScopeWithController', function () {    return {        restrict: 'EA',        scope: { 

angular 指令 要点解析

指令可以删繁就简前端的js代码,杜绝重复的js代码和html代码. 下面就对指令的重要属性进行罗列 一.restrict  =  'AEC'  分别指该指令标识位于attribute属性.element元素.class. 二.scope  = true/false/{name:'=/@/&'}    默认为false,如果设置为true 则说明指令内部独立作用域. scope: { lover: '=', name: '@', say: '&' } 1.{name:'@inputName'

angular指令笔记(一):ng-options

1.ng-options指令用途: 在表达式中使用数组或对象来自动生成一个select中的option列表.ng-options与ng-repeat很相似,很多时候可以用ng-repeat来代替ng-options.但是ng-options提供了一些好处,例如减少内存提高速度,以及提供选择框的选项来让用户选择.当select中一个选项被选择,该选项将会使用ng-model自动绑定到对应数据上.如果你想设一个默认值,可以像这样:$scope.selected = $scope.collection

Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定

一放假就高产似母猪了. 00.混乱的前端界 Angular1.x确实是个学习成本很高的框架,刚开始实习那会儿,前端啥也不懂,工头说用Angular,我们这群小弟也只能硬着头皮学.在这之前,前端的东西大部分都用的jQuery,而Angular正好是和jQuery的思维是相反的,开发过程中遇到了不少坑.而Angular团队也放弃了1.x开始开发和React神似的2.0版本,唉,真是沧海桑田啊. 01.Angular vs jQuery Angular模块化和解耦的思路确实值得一学,但是相对于成熟的j

angular指令监听ng-repeat渲染完成后执行自定义事件方法

今天工作中遇到需要用到ng-repeat遍历渲染完后执行某个操作,angular本身并没有提供监听ng-repeat渲染完成的指令,所以需要自己创建自定义指令. 在ng-repeat模板实例内部会暴露出一些特殊属性$index/$first/$middle/$last/$odd/$even,$index会随着每次遍历(从0开始)递增,当遍历到最后一个时,$last的值为true,所以可以通过判断$last的值来监听ng-repeat的执行状态, 怎么在遍历过程中拿到$last的值:自定义指令 v

自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选&amp;多选下拉框

先说点闲话,熟悉Angular的猿们会喜欢这个插件的. 00.本末倒置 不得不承认我是一个喜欢本末倒置的人,学生时代就喜欢先把晚交的作业先做,留着马上就要交的作业不做,然后慢悠悠做完不重要的作业,卧槽,XX作业马上要交了,赶紧补补补.如今做这个项目,因为没找到合适的多选下拉Web插件,又不想用html自带的丑陋的<select multiple></select>,自己花了一整天时间做了一个.或许这样占用的主要功能开发的时间,开发起来会更有紧迫感吧.感觉自己是个抖M自虐倾向,并且伴

angular指令大全

这篇文章的案例都是来自官方,引用的cdn来自bootcss, 因为angular的官方网站被屏了, 所以要翻, 不过我把整个文档下回来了,方便大家下载可以点击: 打开下载英文版 angular的指令 a标签(也就是html的锚标签): angular的所有事件直接绑定在元素的上,而且事件都是以“ng-****”开头,比如ng-click,ng-keydown,ng-keypress,ng-mouseover.... 基本的绑定事件代码, 点击a标签会触发该控制器内部$scope的alert事件;

如何编写Angular指令

[20140917]Angular:如何编写一个指令 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* BLOCKS =============================================================================*/ p, blockquote, ul, ol, dl, table, pre