[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页面里面了,你也可以通过拼接字符串的形式将标签写在自定义指令里面。

总结

相关文章

ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中...
AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是...
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题,...
Angular实现下拉菜单多选写这篇文章时,引用文章地址如下:h...
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目...
Angular数据更新不及时问题探讨前言 在修复控制角标正确变...