angularjs指令系统系列课程(2):优先级priority,模板template,模板页templateUrl
今天我们先对 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的更多相关文章
- angularjs指令系统系列课程(1):目录
angularjs里面有一套十分强大的指令系统 比如内置指令:ng-app,ng-model,ng-repeat,ng-init,ng-bind等等 从现在开始我们讲解AngularJS自定义指令, ...
- angularjs指令系统系列课程(5):控制器controller
这一节我们来说一下controller这个参数 一.指令控制器的配置方法: 对于指令我有两种配置路由的方式:1.在html中直接引用,2,在指令的controller参数里定义 第一种:在html中直 ...
- angularjs指令系统系列课程(4):作用域Scope
指令的scope对象是一个很重要,很复杂的对象,我们这一节作为重点讲解 可取值: 1.false(默认), 2.true, 3.{}(object) 1.false:默认值,不创建新的作用域 2.tr ...
- angularjs指令系统系列课程(3):替换replace,内容保留transclude,作用方式restrict
这一节我们主要看一下replace,transclude,restrict这三个参数 1.replace 可取值:bool 默认为:true 对于replace属性,设置为false表示原有指令标识不 ...
- django template 模板
九.Template模板 Template 模板是根据view传过来数据在html展示的功能,典型python 模板jinjia2库提供丰富的上下文展示func 创建template位置在项目下与ap ...
- [js高手之路]设计模式系列课程-组合模式+寄生组合继承实战新闻列表
所谓组合模式,就是把一堆结构分解出来,组成在一起,现实中很多这样的例子,如: 1.肯德基套餐就是一种组合模式, 比如鸡腿堡套餐,一般是是由一个鸡腿堡,一包薯条,一杯可乐等组成的 2.组装的台式机同理, ...
- AngularJS路由系列(6)-- UI-Router的嵌套State
本系列探寻AngularJS的路由机制,在WebStorm下开发.本篇主要涉及UI-Route的嵌套State. 假设一个主视图上有两个部分视图,部分视图1和部分视图2,主视图对应着一个state,两 ...
- Silverlight for Windows Phone开发系列课程
Silverlight for Windows Phone开发系列课程(1):Windows Phone平台概况 课程简介:本节开始介绍系列课程的概况,包括课程内容,先决条件,学习目的 ...
- Elasticsearch顶尖高手系列课程推荐
Elasticsearch,是目前行业中非常热门的一个技术.Elasticsearch是一种分布式的海量数据搜索与分析的技术,可以用于电商网站.门户网站.企业IT系统等各种场景下的搜索引擎,也可以用于 ...
随机推荐
- Design and Analysis of Algorithms_Divide-and-Conquer
I collect and make up this pseudocode from the book: <<Introduction to the Design and Analysis ...
- WebForm 页面传值
一.使用Querystring Querystring是一种非常简单的传值方式,其缺点就是会把要传送的值显示在浏览器的地址栏中,并且在此方法中不能够传递对象.如果你想传递一个安全性不是那么太重要或者是 ...
- 非常简单的数据,支持excel表格下载功能
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"% ...
- Android studio 运行设置
在下载完SDK和Android studio后,修改android studio安装目录下bin/idea.properties文件,在末尾添加:idea.fatal.error.notificati ...
- NDK开发-简介&环境搭建(Eclipse,Android Studio)
NDK简介 NDK(Native Development Kit)是一套工具集,允许你在Android应用中嵌入c或c++. 使用NDK的好处主要有以下4点: 安全:由于apk的java层代码很容易被 ...
- css深入理解z-index
z-index取值 z-index:auto;z-index:<integer>;z-index:inherit;继承 特性: 1.支持负值2.支持css3 animation动画;3.在 ...
- 夺命雷公狗-----React_native---4---初始化项目
我们首先在android目录下创建一个apps的文件夹: 然后我们在apps目录下,按住shift键加鼠标右键选择--在此打开命令窗口输入命令初始化项目 然后就是等了................. ...
- 3.多线程NSOperation
1.NSOperation的基本操作 使用NSOperation的两个子类,NSInvocationOperation 和 NSBlockOperation 创建操作,然后将操作添加到队列中去执行 / ...
- windows编程环境
自行下载VS2010官方原版并破解你也可以从微软官方直接下载VS2010 正式版,然后自行破解.Microsoft Visual Studio 2010官方下载地址如下:页面:http://www.m ...
- java第二次作业
这次通过学习,我掌握了下拉菜单和单选按钮的使用下拉菜单构造方法:JComboBox() 创建具有默认数据模型的 JComboBox.JComboBox(ComboBoxModel aModel) 创建 ...