博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
angular -- 自定义指令和模板
阅读量:6463 次
发布时间:2019-06-23

本文共 999 字,大约阅读时间需要 3 分钟。

angular 可以自定义一些指令,来简化我们前端的工作量。

第一种:简单指令示例

自定义指令

JS示例:

var myApp = angular.module('myApp',[]);myApp.directive("sheng",function(){    return {        template:"

你好

" };});

第二种:引入外部文件

模板 - 引入外部文件

JS示例:

myApp.directive("shi",function(){    return {        templateUrl:"page/template.html" // 使用这种必须要在服务器上测试    };});

第三种:使用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. 在实现自定义指令时,把自定义的内容写在指令标签的里面即可。

下面是在做测试的时候,一个简单的示例:

Document

自定义指令

模板 - 引入外部文件

模板 - script标签

 

转载于:https://www.cnblogs.com/e0yu/p/8709594.html

你可能感兴趣的文章
使用Elasticsearch、Logstash、Kibana与Redis(作为缓冲区)对Nginx日志进行收集(转)
查看>>
git review报错一例
查看>>
Tomcat在Linux上的安装与配置
查看>>
《信息安全系统设计基础》 课程教学
查看>>
Linux平台下使用rman进行oracle数据库迁移
查看>>
全栈工程师学习Linux技术的忠告
查看>>
iOS自定制tabbar与系统的tabbar冲突,造成第一次点击各个item图片更换选中,第二次选中部分item图片不改变...
查看>>
C# Dictionary用法总结
查看>>
SVN服务器使用(二)
查看>>
反射获取内部类以及调用内部类方法
查看>>
C语言 - pthread
查看>>
谈Linq To Sql的优劣--纯个人观点
查看>>
HDU 4996 Revenge of LIS(DP)
查看>>
App里面如何正确显示用户头像
查看>>
DATAGUARD维护:从库宕机后如何恢复到管理恢复模式
查看>>
Android中的PID和UID
查看>>
U-BOOT之一:BootLoader 的概念与功能
查看>>
我的路上
查看>>
Velocity处理多余空白和多余空白行问题
查看>>
内容开发平台(PLATFORM)
查看>>