angularJS1笔记-(9)-自定义指令(restrict/template/replace)
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div ng-app="myApp">
<custom-tags>122</custom-tags>
<div class="custom-tags"> </div>
<div custom-tags> </div>
<!--directive:custom-tags-->
</div> <script type="text/javascript" src="../../vendor/angular/angularJs.js"></script>
<script type="text/javascript" src="app/index.js"></script> <script>
</script> </body>
</html>
index.js:
var myApp = angular.module('myApp', [],['$compileProvider',function ($compileProvider) {
$compileProvider.directive('customTags',function () {
return {
//E:element C:class属性 A:attribute M:代表注释
restrict:"ECAM",//限制约束条件
//替换
template:'<div>custom-tags-html</div>',
replace:true //如果此配置为true则替换指令所在的元素 如果为false或者不指定 则把当前指令追加到所在元素的内部
}
})
}])
运行结果：
angularJS1笔记-(9)-自定义指令(restrict/template/replace)的更多相关文章
- angularJS1笔记-(11)-自定义指令(transclude/priority/terminal)
自定义指令的属性 transclude:为true时,允许把html中新定义的指令中原来的dom运用到该指令的template中. 属性priority,设置该指令的优先级,优先级大的先执行,默认指令 ...
- angularJS1笔记-(15)-自定义指令(accordion伸缩菜单原始实现)
index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- angularJS1笔记-(14)-自定义指令(scope)
index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- angularJS1笔记-(13)-自定义指令(controller和controllerAs实现通信)
index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- angularJS1笔记-(12)-自定义指令(compile/link)
index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- angularJS1笔记-(10)-自定义指令(templateUrl属性)
index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- angular学习笔记(三十)-指令(2)-restrice,replace,template
本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: ...
- AngularJs学习笔记3——自定义指令
指令 概述: 前面也说过一些常用指令,用于快速入门.现在详细总结一下:指令用于实现各种页面的操作,是对于底层DOM操作的封装,扩展了HTML的行为,实现页面交互以及数据绑定. 指令是一种执行的信号,一 ...
- AngularJS学习笔记(四) 自定义指令
指令(directive)是啥?简单来说就是实现一定功能的XXX...之前一直用的ng-model,ng-click等等都是指令.当我有一个ng没提供的需求的时候,就可以自定义个指令.指令的好处显而易 ...
随机推荐
- SEO优化上首页之搜索引擎原理内容处理与索引
上文<搜索引擎原理SEO优化上首页之蜘蛛Spider>详细介绍了蜘蛛的分类.抓取入口.抓取策略和更新策略.搜索引擎已把页面抓取回来,接下来是解析页面内容,主要包含判断页面类型.提取页面主题 ...
- Rust 智能指针（一）
Rust 智能指针(一) 1.Box<T> Box<T>是指向堆中的指针. fn main() { let box = Box::new(3); println!(" ...
- 3992: [SDOI2015]序列统计
3992: [SDOI2015]序列统计 链接 分析: 给定一个集和s,求多少个长度为n的序列,满足序列中每个数都属于s,并且所有数的乘积模m等于x. 设$f=\sum\limits_{i=0}^{n ...
- 在eclipse中运行spring web application时的异常： java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderListener
严重: Error configuring application listener of class org.springframework.web.context.ContextLoaderLis ...
- 洛咕 P4304 [TJOI2013]攻击装置
把坐标按照(x+y)%2染色可以发现这是个二分图 二分图最大独立集=点数-最大匹配 于是就是个算匹配的傻逼题了 // luogu-judger-enable-o2 #include<bits/s ...
- DMS路由表
DMS路由表: route add -p 53.90.146.0 mask 255.255.255.0 10.77.35.249 ================================= ...
- Docker数据卷容器
用户需要在多个容器之间共享一些数据,就可以使用数据卷容器 从阿里云仓库下载镜像(也可以自己制作一个基础进项,比如只有几M的alpine) sudo docker pull registry.cn- ...
- 180813-Spring之RestTemplate使用小结一
Spring之RestTemplate使用小结 作为一个Java后端,需要通过HTTP请求其他的网络资源可以说是一个比较常见的case了:一般怎么做呢? 可能大部分的小伙伴直接捞起Apache的Htt ...
- allure2 report+ jenkins 使用
物色了一个挺漂亮的报告生成插件 ——allure. 下面介绍一下这个报告的使用. 1. 添加依赖 <dependencies> <!-- https://mvnrepository. ...
- C++构造函数和析构函数什么情况下会用
析构函数: 1. 对象生命周期结束,被销毁时: 2. delete 指向对象的指针时: 3. delete 指向基类对象的指针时,其析构函数是虚函数: 4. 在嵌套关系中,对象A是对象B的成员,当对象 ...