Angular.js指令学习中一些重要属性的用法教程

前端之家收集整理的这篇文章主要介绍了Angular.js指令学习中一些重要属性的用法教程前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Angular指令

定义一个指令的方法非常简单,只需要调用`directive`方法即可:

1. 基础指令

模板内容来源于缓存') }); app.directive('tsHello',function(){ return{ restrict:'EAC',template:'

Hello,directive

' } }) app.directive('tsTplfile',templateUrl:'/static/tpl.html' } }); app.directive('tsTplscript',function(){ return { restrict:'EAC',templateUrl:'tpl',replace:true } }); //templateUrl属性值是添加的缓存名称,加速文件访问 app.directive('tsTplcache',templateUrl:'cache' } })

2. 重要指令

2.1 transclude

{{text}}
{{content}}

控制台依次输出

函数 正在执行B中的pre函数 正在执行B中的post函数 正在执行A中的post函数

2.4 scope

2.4.1 当scope值是布尔类型

scope属性自定义指令时,默认值就是布尔类型的,初始值为false,在这种情况下,指令中的作用域就是指令元素所在的作用域,如果scope属性值为false,表示不创建新的作用域,直接继承父级作用域,二者数据完全相同,一方有变化,另外一方面将会自动变化。

如果scope属性值为true,表示子作用域是独立创建的,当它的内容发生变化时,并不会修改父作用域中的内容,不仅如此,一旦某个属性被子作用域进行了重置,那么,即使父作用域中的内容变化了,子作用域对应的内容也不会随之变化。

{{message}}
固定

年龄:
{{tip}}

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对编程之家的支持

原文链接:https://www.f2er.com/js/39062.html

猜你在找的JavaScript相关文章