angularjs里面有一套十分强大的指令系统

比如内置指令:ng-app,ng-model,ng-repeat,ng-init,ng-bind等等

从现在开始我们讲解AngularJS自定义指令,

对于指令的命名;在定义时采用驼峰命名比如:helloDirective,

在页面中调用时会按照大写字母用-进行分割,并将大写字母变成小写:hello-directive

先看一个简单的指令:

js

angular.module('app',{}).directive('helloDirective', function() {
return {
template: '<div><span>hello directive</span></div>'
}
});

html:

<section>
<div hello-directive></div>
</section>

运行结果:

 审查代码:


我们看下AngularJS里新定义一个指令的完整参数写法:

newsApp.directive('newDirective', function() {
return {
priority: 0, //优先级
template: '',
templateUrl: '', //引入模板链接
replace: false, //替换
transclude: false, //是否保留原有内容
restrict: 'E', // E C A M
controller: '', // or function(){}
scope: false, //true or {}
require: ['?ngModel'],//依赖项
compile: function compile(tElement, tAttrs, transclude) {
return {
pre: function preLink(scope, iElement, iAttrs, controller) { },
post: function postLink(scope, iElement, iAttrs, controller) { }
}
},
link: function postLink(scope, iElement, iAttrs) {
}
}
});

针对指令的这些参数我们进行分布讲解,课程目录:

  1. 第一节:目录

  2. 第二节:优先级priority,模板template,模板页templateUrl

  3. 第三节:替换replace,内容保留transclude,作用方式restrict

  4. 第四节:作用域scope

  5. 第五节:控制器controller

  6. 第六节:依赖项require,ngModel组件

  7. 第七节:compile函数

  8. 第八节:link函数

angularjs指令系统系列课程(1):目录的更多相关文章

  1. angularjs指令系统系列课程(5):控制器controller

    这一节我们来说一下controller这个参数 一.指令控制器的配置方法: 对于指令我有两种配置路由的方式:1.在html中直接引用,2,在指令的controller参数里定义 第一种:在html中直 ...

  2. angularjs指令系统系列课程(4):作用域Scope

    指令的scope对象是一个很重要,很复杂的对象,我们这一节作为重点讲解 可取值: 1.false(默认), 2.true, 3.{}(object) 1.false:默认值,不创建新的作用域 2.tr ...

  3. angularjs指令系统系列课程(3):替换replace,内容保留transclude,作用方式restrict

    这一节我们主要看一下replace,transclude,restrict这三个参数 1.replace 可取值:bool 默认为:true 对于replace属性,设置为false表示原有指令标识不 ...

  4. angularjs指令系统系列课程(2):优先级priority,模板template,模板页templateUrl

    今天我们先对 priority,template,templateUrl进行学习 1.priority 可取值:int 作用:优先级 一般priority默认为0,数值越大,优先级越高.当一个dom元 ...

  5. Android官方开发文档Training系列课程中文版:目录

    Android官方开发文档Training系列课程中文版:目录   引言 在翻译了一篇安卓的官方文档之后,我觉得应该做一件事情,就是把安卓的整篇训练课程全部翻译成英文,供国内的开发者使用,尤其是入门开 ...

  6. solr与.net系列课程(九)solr5.1的配置

    solr与.net系列课程(九)solr5.1的配置 最近一些园友来咨询solr5.1的配置方式,然后我就去官网下载了个最新版本的solr,发现solr5.0以后solr的下载包里的内容发生的变化,移 ...

  7. solr与.net系列课程(七)solr主从复制

    solr与.net系列课程(七)solr主从复制    既然solr是解决大量数据全文索引的方案,由于高并发的问题,我们就要考虑solr的负载均衡了,solr提供非常简单的主从复制的配置方法,那么下面 ...

  8. Silverlight for Windows Phone开发系列课程

    Silverlight for Windows Phone开发系列课程(1):Windows Phone平台概况         课程简介:本节开始介绍系列课程的概况,包括课程内容,先决条件,学习目的 ...

  9. 基于DDD的现代ASP.NET开发框架--ABP系列文章总目录

    ABP相关岗位招聘:给热爱.NET新技术和ABP框架的朋友带来一个高薪的工作机会 ABP交流会录像视频:ABP架构设计交流群-7月18日上海线下交流会的内容分享(有高清录像视频的链接) 代码自动生成: ...

随机推荐

  1. Design and Analysis of Algorithms_Fundamentals of the Analysis of Algorithm Efficiency

    I collect and make up this pseudocode from the book: <<Introduction to the Design and Analysis ...

  2. handler发消息的形式

    1.onCreate()中写好handler的接受机制,准备接受并处理消息 2.thread中利用handler.post(Runnable r): protected void onCreate(B ...

  3. 关于java写进mysql中文乱码问题

    Eclipse   windows-preferences-general-workspace选择为UTF-8 Mysql 创建时选择UTF-8 URL = "jdbc:mysql://12 ...

  4. Sublime Text3快捷键以及常用插件

    工若善其事,必先利其器.做为一个web前端开发人员,必须有一个得心应手的编码工具,本人推荐Sublime Text3和WebStorm,但WebStorm太过智能和耗性能了对初学者来说弊大于利,所以我 ...

  5. 搭建Android底层开发环境

    为了开发linux驱动方便些,我们一般将linux作为Android的开发环境,那么就需要搭建Android的开发环境,下面是一些搭建Android底层时的心得: (1)安装JDK:除了普遍使用的下载 ...

  6. java的基本数据类型有八种:

    1)四种整数类型(byte.short.int.long):    byte:8 位,用于表示最小数据单位,如文件中数据,-128~127    short:16 位,很少用,-32768 ~ 327 ...

  7. 【004: gcc 和 clang 的简单比较】

  8. 使用sklearn优雅地进行数据挖掘【转】

    目录 1 使用sklearn进行数据挖掘 1.1 数据挖掘的步骤 1.2 数据初貌 1.3 关键技术2 并行处理 2.1 整体并行处理 2.2 部分并行处理3 流水线处理4 自动化调参5 持久化6 回 ...

  9. Extjs swfUpload 多图片上传

    一.属性介绍   类型 默认值 描述 upload_url String   处理上传文件的服务器端页面的url地址,可以是绝对地址,也可以是相对地址,当为相对地址时相对的是当前代码所在的文档地址 p ...

  10. final review 报告

    项目名:约跑 组名:nice! 组长:李权 组员:刘芳芳于淼韩媛媛 宫丽君 final Review会议 时间:2016.12.2  代码git的地址:https://git.coding.net/m ...