[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 是一个JavaScript 框架。它可通过 注:建议把脚本放在 元素的底部。这会提高网页加载速度,因...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题,也即是页面闪烁问题。出现这个的原因是:由于...
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HTML 属性,带有...
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内:{{ expres...
ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用 CSS 样式为了...
$http是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。读取 JSON 文件下是存储在web服务器上...