AngularJS学习笔记（二）指令系统

AngularJS指令系统

最简单的例子：

我们通过指令自定义了一个元素，页面效果为：

image.png

打开谷歌浏览器开发者模式，看到里面被替换成为：

image.png

restrict

匹配模式，有四种模式：

• A：属性
• E:元素
• M：注释
• C：css样式类
  一般来时模式很少使用。
  AEC模式的使用方法示例：

网页效果：

image.png

默认使用A模式。

哪种情况下使用哪种模式？

• 当需要创建带有自己模板的指令时，使用E模式
• 当需要为已有的HTML标签增加功能时，使用A模式

template

模板
template:'

Hi everyone!

'是我们最终在页面上呈现出来的内容。如果内容较多时，我们可以把模板单独写在一个html中，再用templateUrl引入，写法为：templateUrl:'hello.html'

transclude

变换
当我们用指令自定义一个标签时，又在标签里面嵌套了一段内容时，我们自定义的标签内容往往会把原有内容替换，我们可以使用transclude来避免这样的情况出现。

    
        
指令内嵌套的内容
    

页面效果：

image.png

replace

相反的，如果我们想把标签里面的所有内容全部替换掉，我们可以设置replace=true。

    
        
指令内嵌套的内容
    

效果：

image.png

link

用link函数创建可操作DOM的指令。

代码示例：

    

        加载数据
    

可见，通过link函数我们给元素绑定了一个点击事件。
效果：

image.png

点击之后，控制台中显示：

image.png