angular -- 自定义指令和模板
angular 可以自定义一些指令，来简化我们前端的工作量。
第一种：简单指令示例：
<h3>自定义指令</h3>
<sheng></sheng> <!-- 第一种展示方式 -->
JS示例：
var myApp = angular.module('myApp',[]);
myApp.directive("sheng",function(){
return {
template:"<h1>你好</h1>"
};
});
第二种：引入外部文件：
<h3>模板 - 引入外部文件</h3>
<div shi=""></div> <!-- 第二种展示方式 -->
JS示例：
myApp.directive("shi",function(){
return {
templateUrl:"page/template.html" // 使用这种必须要在服务器上测试
};
});
第三种：使用script标签模板：
<h3>模板 - script标签</h3>
<qu></qu>
<script id="qu" type="text/ng-template">script标签模板</script>
JS示例：
myApp.directive("qu",function(){
return {
templateUrl:"qu"
};
});
自定义指令的不同实现方式：
当以类名形式编写时，还必须在定义指令时添加restrict属性 （使用属性和标签的方式时不写也可正常显示）
restrict是“限制”的意思，属性值可以为E（element），A（attribute），C（class），当你希望实现方式只能是标签时，可以写restrict：“E”，restrict：“EAC”表示三种方式都可以，以此类推。
五、自定义模板内容
上面的模板内容都是固定的，实际开发中模板的内容都是由项目需要而生成的，如何让每一个模板的内容不一样呢？ 使用 transclude
1. 在模板中的标签里添加 ng-transclude,（如果你需要某个标签里的内容自定义就添加ng-transclude属性，如果希望是固定的值就不需要加）
2. 添加属性 transclude：true
3. 在实现自定义指令时，把自定义的内容写在指令标签的里面即可。
下面是在做测试的时候，一个简单的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="./js/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myAppController"> <h3>自定义指令</h3>
<sheng></sheng> <!-- 第一种展示方式 --> <h3>模板 - 引入外部文件</h3>
<div shi=""></div> <!-- 第二种展示方式 --> <h3>模板 - script标签</h3>
<qu></qu>
<script id="qu" type="text/ng-template">script标签模板</script>
</body>
<script type="text/javascript">
var myApp = angular.module('myApp',[]);
myApp.directive("sheng",function(){
return {
template:"<h1>你好</h1>"
};
});
myApp.directive("shi",function(){
return {
templateUrl:"page/template.html" // 使用这种必须要在服务器上测试
};
});
myApp.directive("qu",function(){
return {
templateUrl:"qu"
};
});
myApp.controller('myAppController',['$scope',function($scope){ }]);
</script>
</html>
angular -- 自定义指令和模板的更多相关文章
- Angular自定义指令（directive）
angular自定义指令,意我们可以通过angula自己定义指令,来实现我们的特殊要求,为所欲为,一支穿云箭,千军万马来相见 多少年的老规矩了,先看代码: <!DOCTYPE html> ...
- angular 自定义指令详解 Directive
在angular中,Directive,自定义指令的学习,可以更好的理解angular指令的原理,当angular的指令不能满足你的需求的时候,嘿嘿,你就可以来看看这篇文章,自定义自己的指令,可以满足 ...
- angular 自定义指令 directive transclude 理解
项目中断断续续的用了下angular,也没狠下心 认真的学习.angular 特别是自定义指令这块 空白. transclude 定义是否将当前元素的内容转移到模板中.看解释有点抽象. 看解释有点抽象 ...
- Angular自定义指令directive:scope属性
在AngularJS中,除了内置指令如ng-click等,我们还可以自定义指令.自定义指令,是为了扩展DOM元素的功能.代码中,通过指定directive中的restrict属性,来决定这个指令是作为 ...
- angular自定义指令命名的那个坑
Directive 先从定义一个简单的指令开始. 定义一个指令本质上是在HTML中通过元素.属性.类或注释来添加功能.AngularJS的内置指令都是以ng开头,如果想自定义指令,建议自定义一个前缀代 ...
- angularJS 使用自定义指令输出模板
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...
- angular自定义指令－directive
Directive究竟是个怎么样的一个东西呢?我个人的理解是这样的:将一段html.js封装在一起,形成一个可复用的独立个体,具体特定的功能.下面我们来详细解读一下Directive的一般性用法. v ...
- angular自定义指令相关知识及代码
原文地址 https://www.jianshu.com/p/0c015862156d 大纲 1.自定义指令之——属性指令 2.自定义属性指令的运行原理 3.自定义属性指令代码实践 4.自定义结构指令 ...
- Angular17 Angular自定义指令
1 什么是HTML HTML文档就是一个纯文本文件,该文件包含了HTML元素.CSS样式以及JavaScript代码:HTML元素是由标签呈现,浏览器会为每个标签创建带有属性的DOM对象,浏览器通过渲 ...
随机推荐
- 创建ajax对象并兼容多个浏览器方法简单记录
这篇文章主要介绍了如何创建ajax对象并兼容多个浏览器,需要的朋友可以参考下<script> function createAjax(){ var request=false; //win ...
- Tensorflow参数初始化很慢的问题
首先查看是否使用了import cv2 如果有import cv2,说明是opencv的问题 因为如果你的opencv是本地编译的,那么很可能使用了cudnn进行编译,那么这个cv2就会占用显存,并且 ...
- JVM内存模型 小小结
可以看一下我的另一篇总结 JVM运行时数据区与JVM堆内存模型小结 推荐一篇文章,尚学堂的 Java内存模型深度解读 . 不方便全文转载,就摘录下吧. 以往的认知都是以基本类型.引用类型.常量.方法等 ...
- 第三百零三节，Django框架介绍——用pycharm创建Django项目
Django框架介绍 Django是一个开放源代码的Web应用框架,由Python写成.采用了MVC的软件设计模式,即模型M,视图V和控制器C.它最初是被开发来用于管理劳伦斯出版集团旗下的一些以新闻内 ...
- 在windows下编译ffmpeg
编译ffmpeg,我在网上找了很多相关的方法,但最后都没编译成功. 所以下面就记录下自己的编译方法吧,留着以后编译的时候做参考. 1.首先,下载编译工具MinGW+Msys,搭建编译环境.工具下载地址 ...
- kafka学习之-文件存储机制
Kafka是什么 Kafka是最初由Linkedin公司开发,是一个分布式.分区的.多副本的.多订阅者,基于zookeeper协调的分布式日志系统(也可以当做MQ系统),常见可以用于web/nginx ...
- 做BS开发，你应该知道的一些东西
界面和用户体验(Interface and User Experience) 知道各大浏览器执行Web标准的情况,保证你的站点在主要浏览器上都能正常运行.你至少要测试以下引擎:Gecko(用于Fire ...
- [java] Unsupported major.minor version 51.0 错误解决方案
jdk1.6工程中使用外部jar包中类出现:Unsupported major.minor version 51.0原因分析:出现上述错误是因为:外部jar包使用jdk1.7(jdk7)编译,而使用此 ...
- 【Android开发】如何设计开发一款Android App
本文从开发工具选择,UI界面.图片模块.网络模块.数据库产品选择.性能.安全性等几个方面讲述了如果开发一个Android应用.现在整理出来分享给广大的Android程序员. 开发工具的选择 开发工具我 ...
- 二：Java之异常处理
一.异常的概念 异常,也就是非正常情况. 其实.异常本质上是程序上的错误,包含程序逻辑错误和系统错误. 错误在我们编敲代码的过程中会常常发生,包含编译期间和执行期间的错误,在编译期间出现的错误有编译器 ...