微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

[Angularjs]自定义指令

写在前面

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

例子

一个Helloworld的例子,让我们先上手自定义指令,先体会下指令的妙处。

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

Hello world

'

效果

生成的html

cope" cope"Hello world

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

默认值为"A"),对应首字母记起来也很容易。

transclude

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

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


标签1
标签2

生成的html

link

注册事件监听器。

cope:指令的scope的引用。scope变量在初始化时是不被定义的,link方法注册监视器监视值变化事件。

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

scope

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

cope中传递而来字符串中的值。指令可以使用该值但无法修改,是常用的变量。

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

cope中起作用的表达式,它允许指令实现比修改值更高级的操作。

自定义指令

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;">>

页面

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

总结

原文地址:https://www.jb51.cc/angularjs/191485.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐