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的链接 或者一个返回链接的函数

时间: 2024-11-03 22:25:43

angularjs指令系统系列课程(2):priority,template,templateUrl的相关文章

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

angularjs里面有一套十分强大的指令系统 比如内置指令:ng-app,ng-model,ng-repeat,ng-init,ng-bind等等 从现在开始我们讲解AngularJS自定义指令 首先我们先看下AngularJS里新定义一个指令的写法: newsApp.directive('newDirective', function() { return { priority: 0, //优先级 template: '', templateUrl: '', //引入模板链接 replace

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

本系列探寻AngularJS的路由机制,在WebStorm下开发.本篇主要涉及UI-Route的嵌套State. 假设一个主视图上有两个部分视图,部分视图1和部分视图2,主视图对应着一个state,两个部分视图分别对应state1和state2,那state与state1和state2形成了嵌套关系. AngularJS路由系列包括: 1.AngularJS路由系列(1)--基本路由配置2.AngularJS路由系列(2)--刷新.查看路由,路由事件和URL格式,获取路由参数,路由的Resolv

AngularJS路由系列(3)-- UI-Router初体验

本系列探寻AngularJS的路由机制,在WebStorm下开发. AngularJS路由系列包括: 1.AngularJS路由系列(1)--基本路由配置2.AngularJS路由系列(2)--刷新.查看路由,路由事件和URL格式,获取路由参数,路由的Resolve3.AngularJS路由系列(3)-- UI-Router初体验4.AngularJS路由系列(4)-- UI-Router的$state服务.路由事件.获取路由参数5.AngularJS路由系列(5)-- UI-Router的路由

AngularJS路由系列(5)-- UI-Router的路由约束、Resolve属性、路由附加数据、路由进入退出事件

本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router约束路由参数● UI-Router的Resolve属性● UI-Router给路由附加数据● UI-Router的onEnter和onExit事件 AngularJS路由系列包括: 1.AngularJS路由系列(1)--基本路由配置2.AngularJS路由系列(2)--刷新.查看路由,路由事件和URL格式,获取路由参数,路由的Resolve3.AngularJS路由系列(3)-- UI-Rou

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

所谓组合模式,就是把一堆结构分解出来,组成在一起,现实中很多这样的例子,如: 1.肯德基套餐就是一种组合模式, 比如鸡腿堡套餐,一般是是由一个鸡腿堡,一包薯条,一杯可乐等组成的 2.组装的台式机同理,由主板,电源,内存条,显卡, 机箱,显示器,外设等组成的 把一个成型的产品组成部件,分成一个个独立的部件,这种方式可以做出很多灵活的产品,这就是组合模式的优势 比如:家用台式机电脑,要求配置比较低, 这个时候只需要主板+电源+内存条+机箱+显示器+外设就可以了,不需要配置独立显卡 鸡腿堡+鸡翅+紫薯

赵强老师:免费实战微课系列课程

赵强老师实战微课系列课程 Oracle数据库.大数据.Weblogic中间件 永久免费!!! (*)赵强老师实战微课之一:在Oracle SQL*PLUS中修改SQL语句 http://edu.51cto.com/course/course_id-9016.html (*)赵强老师实战微课之二:搭建Hadoop的Eclipse开发环境 http://edu.51cto.com/course/course_id-9017.html (*)赵强老师实战微课之三:使用Weblogic Console生

【极客学院出品】Cocos2d-X系列课程之九-BOX2D物理引擎

Cocos2d-x 是时下最热门的手游引擎,在国内和国外手机游戏开发使用的份额各自是70%和25%,在App Store的top10中,有7个是用它开发的. 本节课程为Cocos2d-x系列课程之九,学习BOX2D物理引擎! 学习路径图: 课程适合小白系统学习,仅需6个课时,在极客学院首席讲师风趣幽默的课程里轻松掌握BOX2D物理引擎.恭喜你也从此将走上为牛X程序员的不归路. 今年上午9点正式上线,请别再期待娱乐圈的新闻了,马上開始学习吧>>> 我们还有很多其它更新更实战的课程,登录极客

tyvj P4751 NOIP春季系列课程 H&#39;s Problem

-H's Problem- 描述 小H是一个喜欢逛街的女孩子,但是由于上了大学,DDL越来越多了,她不能一直都处于逛街的状态.为了让自己能够更加沉迷于学习,她规定一次逛街只逛T个单位的时间. 小H从1号店出发,从1号店走到第i号店需要花费ai的时间,这些店形成了一条直线,也就是说小H从第i号店走到第i+1号店需要花费的时间为a{i+1}-ai.若小H选择了第i号店并且进去逛,则会消耗bi的时间.对于第i家店,小H都对它有自己的看法.具体地,可以用ci来表示小H是否喜欢这家店.如果ci=1,则表示

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

原文地址 : http://android.xsoftlab.net/training/index.html 引言 在翻译了一篇安卓的官方文档之后,我觉得应该做一件事情,就是把安卓的整篇训练课程全部翻译成英文,供国内的开发者使用,尤其是入门开发者,虽然现在网络上有很多入门课程,但是还是依靠官方文档学习来的靠谱,安卓官方文档是一系列的课程,使每个人可以系统的掌握安卓的知识,相比其它课程来说,它为开发者提供了查缺补漏的功能. 在这里你可以领略到安卓开发世界的精彩. Tips : 同时,本目录可以作为