[Angularjs]自定义指令

前端之家收集整理的这篇文章主要介绍了[Angularjs]自定义指令前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

写在前面

标签,比如你在移动端h5应用中,有个经常用的功能,比如通讯录的功能,不同的页面都要用到,这时你可以将其封装为指令,在使用的时候可以通过这样的语义化的标签直接在页面中使用即可。

例子

自定义指令,先体会下指令的妙处。

app = angular.module('app_store',['ngRoute','StoreService'自定义指令 app.directive('helloworld','E''

Hello world

'

效果

生成的html

Hello world

生成的标签,你大概已经猜出template的作用了。

transclude

自定义的指令发标签替换成浏览器能够认识的标签,如果自定义标签内部出现了子标签,那么transclude就可以帮我进行处理了。

自定义指令 app.directive('helloworld',template: '
Hello world
'


标签1
标签2

生成的html

link

注册事件监听器。

方法会注册监视器监视值变化事件。

方法一般通过jquery操作实例。

scope

属性标签传递。scope是创建可以复用指令的必备条件,每个指令(不论是处于嵌套指令的哪一级)都有其唯一的作用域,它不依赖于父scope。scope对象定义names和types变量。

修改,是常用的变量。

包括符合对象和数组。指令可以更改父级scope中的值,所以当指令需要修改父级scope中的值时我们就需要这种类型。

修改值更高级的操作。

自定义指令

app = angular.module('app_store',]);

<span style="color: #008000;">//<span style="color: #008000;">自定义指令
app.directive('friends',controller:'FriendsController'<span style="color: #000000;">,templateUrl: '../Scripts/Views/friends.html'<span style="color: #000000;">,transclude: <span style="color: #0000ff;">true<span style="color: #000000;">,scope: {
type:"&"<span style="color: #000000;">
}
};
});

Box" < {{item.Name}} From:{{item.Price}}

<span style="color: #0000ff;"></<span style="color: #800000;">div<span style="color: #0000ff;">>

页面

页面里面了,你也可以通过拼接字符串的形式将标签写在自定义指令里面。

总结

猜你在找的Angularjs相关文章