今天我们先对 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. poj 3262 Protecting the Flowers

    http://poj.org/problem?id=3262 Protecting the Flowers Time Limit: 2000MS   Memory Limit: 65536K Tota ...

  2. AjaxStudyNote

    AjaxStudyNoteBy:Silvers:(E:\Video_Tutorials\Java自学视频\尚硅谷JavaEE培训\6WEB基础-Ajax)15:02 2016/2/29什么是AjaxA ...

  3. Json_异常_net.sf.json.JSONException: JSONObject["solution"] not found.

    net.sf.json.JSONException: JSONObject["solution"] not found. 没有这个元素造成的. 问题代码: JSONObject j ...

  4. Cassandra 配制 cassandra.yaml

    一.设置用户名和密码 修改cassandra.yaml配置文件 把默认的 authenticator: AllowAllAuthenticator 改成 authenticator: Password ...

  5. 【《zw版·Halcon与delphi系列原创教程》 zw_halcon人脸识别

    [<zw版·Halcon与delphi系列原创教程>zw_halcon人脸识别 经常有用户问,halcon人脸识别方面的问题. 可能是cv在人脸识别.车牌识别方面的投入太多了. 其实,人脸 ...

  6. windows下jenkins常见问题填坑

    没有什么高深的东西,1 2天的时间大多数人都能自己摸索出来,这里将自己遇到过的问题分享出来避免其他同学再一次挖坑. 目录 1. 主从节点 2. Nuget自动包还原 3. powershell部署 4 ...

  7. [转载] linux 下查看机器cpu是几核的

    linux 下查看机器cpu是几核的 本文转自”映月的博客“:http://wurhuangfeng.blog.163.com/blog/static/35178241201111235829116/ ...

  8. Nop源码分析二

    上文我们已经通过该行代码:var typeFinder = containerManager.Resolve<ITypeFinder>(); 从注入容器中获取到了typeFinder实例. ...

  9. django中文配置的问题

    language_code:'zh-hans' 生成的语言文件请使用zh_Hans,这样才能你的app和系统的app完全翻译成中文,掉此坑的请在下面留言

  10. 基于webrtc的资源释放问题(二)

    基于webrtc的资源释放问题(二) ——建立连接的过程中意外中断 应用背景: 我们在打电话的时候会不会遇到这种情况?打电话的时候未接通之前挂掉了电话,或者在接通之后建立的连接的过程中挂掉电话? 特别 ...