angularjs指令详解

前言 最近学习了下angularjs指令的相关知识，也参考了前人的一些文章，在此总结下。 欢迎批评指出错误的地方。 Angularjs指令定义的API AngularJs的指令定义大致如下 angular.module("app",[]).directive("directiveName",function(){ return{ //通过设置项来定义 }; }) 其中return返回的对象包含很多参数，下面一一说明 1.restrict （字符串）可选参数，指明指令在DOM里面以什么形式被声明； 取值有：E(元素),A(属性),C(类),M(注释)，其中默认值为A； E(元素)：<directiveName></directiveName> A(属性)：<div directiveName='expression'></div> C(类)： <div class='directiveName'></div> M(注释)：<--directive:directiveName expression--> 例如restrict：‘EA’ 则表示指令在DOM里面可用元素形式和属性形式被声明； 一般来说，当你创建一个有自己模板的组件的时候，需要使用元素名，如果仅仅是为为已有元素添加功能的话，就使用属性名 注意：如果想支持IE8，则最好使用属性和类形式来定义。 另外Angular从1.3

前言 最近学习了下angularjs指令的相关知识，也参考了前人的一些文章，在此总结下。 欢迎批评指出错误的地方。 Angularjs指令定义的API AngularJs的指令定义大致如下 angular.module("app",[]).directive("directiveName",function(){ return{ //通过设置项来定义 }; })其中return返回的对象包含很多参数，下面一一说明 你知道用AngularJs怎么定义指令吗？0 1.restrict （字符串）可选参数，指明指令在DOM里面以什么形式被声明； 取值有：E(元素),A(属性),C(类),M(注释)，其中默认值为A； E(元素)：<directiveName></directiveName> A(属性)：<div directiveName='expression'></div> C(类)： <div class='directiveName'></div> M(注释)：<--directive:directiveName expression--> 你知道用AngularJs怎么定义指令吗？1 例如restrict：‘EA’ 则表示指令在DOM里面可用元素形式和属性形式被声明； 一般来说，当你创建一个有自己模板的组件的时候，需要使用元素名，如果仅仅是为为已有元素添加功能的话，就使用属性名

通过指令机制，angularjs 提供了一个强大的扩展系统，我们可以通过自定义指令来扩展自己的指令系统。 怎样定义自己的指令呢？ 我们通过 Bootstrap UI 来学习吧。这个项目使用 angularjs 将 Bootstrap 3 进行了封装，是我们学习 angularjs 很好的样例。 从 Alert 开始 首先，我们从比较简单的 alert 指令来开始学习。 在 Bootstrap 中，警告框使用类 alert 来表示, 通过 alert-success， alert-info， alert-warning, alert-danger 来表示不同类型的警告。 <div class="alert alert-success">...</div> <div class="alert alert-info">...</div> <div class="alert alert-warning">...</div> <div class="alert alert-danger">...</div> 对于可关闭的警告框来说，还可以用一个可选的.alert-dismissable和关闭按钮，但是，这是通过脚本来实现的，在 bootstrap ui 这里没有使用。 <div class="alert alert-warning alert-dismissable"> <button

本次讲解的版本是AngularJS-1,最流行的可能还是AngularJS1吧 1.什么是AngularJS AngularJS 诞生于 2009 年，由 Misko Hevery 等人创建，后为 Google 所收购。是一款优秀的前端 JS框架，已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性，最为核心的是： MVC、模块化、自动化双向数据绑定、依赖注入 等等 2.MVC模式 Angular 遵循软件工程的 MVC 模式,并鼓励展现，数据，和逻辑组件之间的松耦合.通过依赖注入(dependency injection），Angular 为客户端的 Web 应用带来了传统服务端的服务，例如独立于视图的控制。 因此，后端减少了许多负担，产生了更轻的 Web 应用 Model:数据,其实就是 angular 变量($scope.XX); View: 数据的呈现,Html+Directive(指令); Controller:操作数据,就是 function,数据的增删改查; 3.双向绑定 AngularJS 是建立在这样的信念上的：即声明式编程应该用于构建用户界面以及编写软 件构建，而指令式编程非常适合来表示业务逻辑。框架采用并扩展了传统 HTML，通过双向 的数据绑定来适应动态内容，双向的数据绑定允许模型和视图之间的自动同步。因此， AngularJS 使得对

AngularJS：何时应该使用Directive、Controller、Service？ AngularJS是一款非常强大的前端 MVC框架 。同时，它也引入了相当多的概念，这些概念我们可能不是太熟悉。（译者注：老外真谦虚，我大天朝的 码农 对这些概念那是相当熟悉啊！）这些概念有：Directive（指令） Controller（控制器） Service （服务） 下面我们逐个来看这些概念，研究一下为什么它们会像当初设计的那样强大，同时研究一下为什么我们要以那样的方式去使用它们。我们从Service开始。 SERVICES（服务） 如果你已经使用过 AngularJS ，你可能已经遇到过Service这个概念了，简而言之，Service就是【单例对象】在AngluarJS 中的一个别名。这些小东西（指单例对象）会被经常传来传去，保证你每次访问到的都是同一个实例，这一点和 工厂模式 不同。基于这种思想，单例对象让我们可以 实现一些相当酷的功能，它可以让很多controller和directive访问内部的数值。在#angularjs 频道（译者注：指的是原作者自己的博客频道）里面这也是非常常见的问题之一，那就是在应用中的不同代码块之间如何共享数据？我们来看这个问题。 我们首先来创建一个module（模块），本文中的所有代码都会用到这个module。 var module =

前台代码起来越多，需要用一种更高效方式整合 MVC只是手段，终极目标是模块化和复用 第一部分：快速上手 1.1 感受AngularJS的4大核心特性 1.2 搭建开发、调试、测试环境 第二部分：基本概念和用法 2.1 MVC 2.2 模块化与依赖注入 2.3 双向数据绑定 2.4 指令 2.5 Service 2.6 Provider 2.7 表单 2.8 综合实例BookStore 第三部分：核心原理解析 3.1 Parser 3.2 双向数据绑定 3.3 依赖注入 第四部分：ng控件开发 4.1 用AngularJS改写jQuery控件 4.2 angularjs-ui 4.3 移动控件库ionic 第五部分：TDD前端自动化测试 5.1 TDD 5.2 详解Jasmine与Pracotor tool: http://www.oschina.net/p/angularjs-eclipse module: Jasmine resource: 官方教程 http://woxx.sinaapp.com/ 种子项目 https://github.com/angular/angular-seed 开源中国的 AngularJS 优秀文章汇总 http://www.oschina.net/news/54687/oschina-angular-articles-summary http:/