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. Spting--DI/IOC

    DI/IOC <bean> 代表由容器构建的对象(通过反射构建,且类必须有无参的构造方法)  公共属性 id="唯一的id" 在容器中是唯一的 name="类 ...

  2. cassandra.yaml介绍

    cluster_name 集群的名字,默认情况下是TestCluster.对于这个属性的配置可以防止某个节点加入到其他集群中去,所以一个集群中的节点必须有相同的cluster_name属性. list ...

  3. Entity Framework7 有哪些不同?之具体功能

    Entity Framework7 有哪些不同?之具体功能 前面我们介绍了关于EF7的新特性.开发计划和入门介绍.今天,我们来看看EF7的具体新功能及用法.本文中的环境,为EF7入门里介绍的环境. 1 ...

  4. 误用的volatile

    在嵌入式编程中,有对某地址重复读取两次的操作,如地址映射IO.但如果编译器直接处理p[0] = *a; p[1] = *a这种操作时,往往会忽略后一个,而直接使用前一个已计算的结果.这是有问题的,因为 ...

  5. Redmine插件

    1.redmine_customize_core_fields可以对自带字段进行设置,看起来很不错,2016年6月23日上线,安装失败, 看来测试不完整.redmine_issue_field_vis ...

  6. php常用array函数

    http://www.w3school.com.cn/php/php_ref_array.asp 1.array_change_key_case() 把数组中所有键更改为小写或大写2.array_ch ...

  7. 161230、利用代理中间件实现大规模Redis集群

    前面在<大规模互联网应用Redis架构要点>和<Redis官方集群方案 Redis Cluster>两篇文章中分别介绍了多Redis服务器集群的两种方式,它们是基于客户端sha ...

  8. jquery autocomplete

    <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http: ...

  9. 简单介绍MR21和MR22

    MR21和MR22都可以用来调整价格,MR21是更改的单个物料的价格,MR22更改的是库存总价值,所以MR21可以更改移动平均价(V)或标准价(S)的物料价格.MR22只能更改移动平均价(V)的物料价 ...

  10. javascript - 可编辑表格控件 支持全键盘操作(无JS框架)

    项目中经常会用到表格编辑控件,网上也有不少,但是确实没有完全符合我要求的, 自己写一个吧! 1.该控件支持 数据显示列,文本编辑列,选择列,下拉列,索引列,删除列 六种列类型 2.支持全键盘操作,自定 ...