今天我们先对 priority,template,templateUrl进行学习

1.priority

 可取值:int

 作用:优先级

 一般priority默认为0,数值越大,优先级越高。当一个dom元素上有多个指令,在执行compile函数的时候,指令的执行顺序为:高优先级,先链接排序的先执行

如果想让一个指令最后一个执行:

 terminal 这个参数设置为true,即可使该指令在同一个Dom元素上的指令列表里最后一个执行

2.template

可取值:string或function

作用:指令操作元素的内容

例如:

js

angular.module('app',[])

.directive('helloDirective',function(){ 

  return{
    template:'<div>hello Directive</div>'
  }
});

或者

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

html:

<section ng-app>
<div id="hellodiv" hello-directive></div>
</section>

这样目标div,也就是指令作用的div 就会被填充template模板里面的内容

运行后html代码生成为:

<section class="ng-scope">
<div hello-directive="">
<div>hello Directive</div>
</div>
</section>

3.templateUrl

可取值:string或function

作用:指令操作元素的内容

该参数的功能和template一样,只是该参数的值为一个模板html的链接 或者一个返回链接的函数

angularjs指令系统系列课程(2):优先级priority,模板template,模板页templateUrl的更多相关文章

  1. angularjs指令系统系列课程(1):目录

    angularjs里面有一套十分强大的指令系统 比如内置指令:ng-app,ng-model,ng-repeat,ng-init,ng-bind等等 从现在开始我们讲解AngularJS自定义指令, ...

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

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

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

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

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

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

  5. django template 模板

    九.Template模板 Template 模板是根据view传过来数据在html展示的功能,典型python 模板jinjia2库提供丰富的上下文展示func 创建template位置在项目下与ap ...

  6. [js高手之路]设计模式系列课程-组合模式+寄生组合继承实战新闻列表

    所谓组合模式,就是把一堆结构分解出来,组成在一起,现实中很多这样的例子,如: 1.肯德基套餐就是一种组合模式, 比如鸡腿堡套餐,一般是是由一个鸡腿堡,一包薯条,一杯可乐等组成的 2.组装的台式机同理, ...

  7. AngularJS路由系列(6)-- UI-Router的嵌套State

    本系列探寻AngularJS的路由机制,在WebStorm下开发.本篇主要涉及UI-Route的嵌套State. 假设一个主视图上有两个部分视图,部分视图1和部分视图2,主视图对应着一个state,两 ...

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

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

  9. Elasticsearch顶尖高手系列课程推荐

    Elasticsearch,是目前行业中非常热门的一个技术.Elasticsearch是一种分布式的海量数据搜索与分析的技术,可以用于电商网站.门户网站.企业IT系统等各种场景下的搜索引擎,也可以用于 ...

随机推荐

  1. 如何用jenkins实现自动化构建新版本和二维码下载

    最近公司开发了自己的app,研发过程中对于测试人员来说,经常会像开发的人员询问,有没有最新的包啊(apk打包后的新版本),以免你测试的时候,提交了一些缺陷,实际上人家已经解决了.当然你也可以说你们公司 ...

  2. freemarker配置信息

    <!--  <!– freemarker的配置 –> <bean id="freemarkerConfigurer" class="org.spr ...

  3. Android--自定义加载框

    1,在网上看了下好看的加载框,看了一下,挺好看的,再看了下源码,就是纯paint画出来的,再加上属性动画就搞定了 再来看一下我们的源码 LvGhost.java package com.qianmo. ...

  4. 3.MongoDB下Windows下的安装

    由于博主目前使用的是Windows的系统,没有使用Linux等其它的系统,因此此安装配置和开发使用,均是在Windows下进行的,以后在使用其它的系统的时候,再将其它系统的配置的使用补充上来. 1.下 ...

  5. maven官方库中没有oracle jdbc驱动的问题解决

    1.找到可用的oracle jdbs驱动jar包文件,放置到指定目录(可根据实际自定义) D:\jdbc\ojdbc14.jar 2.安装好maven,主要是配置好环境变量 MAVEN_HOME='指 ...

  6. MyBatis学习教程

    http://www.yihaomen.com/article/java/302.htm http://www.yihaomen.com/article/java/303.htm http://www ...

  7. JQuery常用方法一览

    $(”p”).addClass(css中定义的样式类型); 给某个元素添加样式 $(”img”).attr({src:”test.jpg”,alt:”test Image”}); 给某个元素添加属性/ ...

  8. ResultSet相关ResultSetMetaData详细

    DatabaseMetaData 有关整个数据库的信息:表名.表的索引.数据库产品的名称和版本.数据库支持的操作. ResultSet 关于某个表的信息或一个查询的结果.您必须逐行访问数据行,但是您可 ...

  9. android微信支付总结+自己搭建服务器

    1.前期注册操作 1-1:微信开发平台:https://open.weixin.qq.com/ 1-2:创建移动应用 签名获取: 1.将自己的apk签名打包,运行到手机上. 2.将微信支付的签名工具, ...

  10. asp之缓存 cachestate

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...