Angular1.x复杂指令实例详解

前端之家收集整理的这篇文章主要介绍了Angular1.x复杂指令实例详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲述了Angular1.x复杂指令。分享给大家供大家参考,具体如下:

Box-sizing: border-Box; border-bottom: rgb(221,221,221) 1px solid; border-left: rgb(221,221) 1px solid; padding-bottom: 6px; line-height: 30px; widows: 1; text-transform: none; text-indent: 0px; margin: 0px 0px 16px; outline-style: none; outline-color: invert; padding-left: 13px; outline-width: 0px; border-spacing: 0px; padding-right: 13px; border-collapse: collapse; font-family: 'Libre Baskerville','Lucida Grande','Hiragino Sans GB','Hiragino Sans GB W3','Microsoft YaHei','wenquanyi micro hei',sans-serif,'Apple Color Emoji'; max-width: 100%; word-wrap: break-word; background: none transparent scroll repeat 0% 0%; letter-spacing: normal; height: 441px; color: rgb(51,51,51); font-size: 16px; vertical-align: baseline; overflow: hidden; border-top: rgb(221,221) 1px solid; border-right: rgb(221,221) 1px solid; word-spacing: 0px; padding-top: 6px; -webkit-text-stroke-width: 0px"> Box-sizing: border-Box; border-bottom: 0px; border-left: 0px; padding-bottom: 0px; line-height: 30px; margin: 0px; outline-style: none; outline-color: invert; padding-left: 0px; outline-width: 0px; padding-right: 0px; word-wrap: break-word; background: none transparent scroll repeat 0% 0%; font-size: 16px; vertical-align: baseline; overflow: hidden; border-top: 0px; border-right: 0px; padding-top: 0px"> Box-sizing: border-Box; padding-bottom: 0px; line-height: 30px; border-right-width: 0px; margin: 0px; outline-style: none; outline-color: invert; padding-left: 0px; outline-width: 0px; padding-right: 0px; word-wrap: break-word; background: none transparent scroll repeat 0% 0%; border-bottom-width: 0px; font-size: 16px; vertical-align: baseline; overflow: hidden; border-top: rgb(204,204,204) 1px solid; border-left-width: 0px; padding-top: 0px"> Box-sizing: border-Box; padding-bottom: 0px; line-height: 30px; border-right-width: 0px; margin: 0px; outline-style: none; outline-color: invert; padding-left: 0px; outline-width: 0px; padding-right: 0px; word-wrap: break-word; background: rgb(247,247,249); border-bottom-width: 0px; font-size: 16px; vertical-align: baseline; overflow: hidden; border-top: rgb(204,204) 1px solid; border-left-width: 0px; padding-top: 0px">

table-striped样式并没有起作用,设置replace属性为true后的效果是模版内容将替换掉指令所应用到的div元素。

管理指令的作用域

为每个指令实例创建自己的作用域

设置scope属性为true将允许我们在同一个控制器里复用这个指令,可以避免指令共享数据值。

data.name这个属性是在一个对象上定义的,意味着这个值将会在指令的哥哥实例之间所共享,而且所有相应的视图会同步更新。

city是直接在控制器的作用于上被直接赋值的,意味着这个值只在此指令的作用域上有效。

创建隔离的作用域

对于在一个对象上定义的属性,可能会被其他人改变。解决方法就是创建一个隔离的作用域,就是Angularjs为指令的每个实例创建一个独立的作用域的地方,但是这个作用域并不继承自控制器的作用域。当scope定义属性被设置为一个对象时,可创建一个隔离的作用域。隔离的作用域的最基本类型是用一个没有属性的对象表示。

当创建在不同情况下复用的指令时,隔离的作用域是一种重要的构件时。因为它防止了在控制器作用域和指令之间出现了意料外的交互。但是完全隔绝一个指令会使得难以输入和输出数据。

隔绝的作用域允许使用应用于指令旁边的元素上的属性将数据值绑定到控制器作用域上。

单向绑定@:

向以@为前缀的作用域对象上增添一个属性,以在一个隔离的作用力创建一个单向绑定。

local属性的值以@为前缀,制定了属性local的值应该从一个来自名为nameprop的特性的单向绑定来获得。

使用一个隔离的作用域使得指令不会继承控制器作用域中的数据。

双向绑定=:

向以=为前缀的作用域对象上增添一个属性,以在一个隔离的作用域里创建一个双向绑定。

在隔离作用于上的单向绑定总是被计算作字符串值,如果想访问一个数组,就必须使用双向绑定。

使用单向绑定时,提供了一个被"{{"和"}}"字符所包围的绑定表达式,但是angularjs需要知道在双向绑定中哪个属性需要被更新,所以不需要被"{{"和"}}"包围。

计算表达式&:

向以&为前缀的作用域对象上增添一个属性,在父作用域的上下文计算一个表达式。

调用cityFn()时,使用了圆括号,要计算被这个特性所指定的表达式,这是必需的,即使当表达式本身就是一个函数调用时。

使用隔离作用域的数据来计算一个表达式

可以将来自代计算的隔离作用域的数据为控制器作用域表达式的一部分。

更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《》、《》及《

希望本文所述对大家AngularJS程序设计有所帮助。

原文链接:https://www.f2er.com/js/41184.html

猜你在找的JavaScript相关文章

Box-sizing: border-Box; border-bottom: rgb(221,221) 1px solid; text-align: center; border-left: rgb(221,221) 1px solid; padding-bottom: 6px; line-height: 30px; margin: 0px; outline-style: none; outline-color: invert; padding-left: 13px; outline-width: 0px; padding-right: 13px; border-collapse: collapse; word-wrap: break-word; background: none transparent scroll repeat 0% 0%; font-size: 16px; vertical-align: baseline; overflow: hidden; border-top: rgb(221,221) 1px solid; padding-top: 6px">

Box-sizing: border-Box; border-bottom: 0px; border-left: 0px; padding-bottom: 0px; line-height: 30px; margin: 0px; outline-style: none; outline-color: invert; padding-left: 0px; outline-width: 0px; padding-right: 0px; font-family: 'Microsoft YaHei'; word-wrap: break-word; background: none transparent scroll repeat 0% 0%; color: rgb(102,102,102); font-size: 15px; vertical-align: baseline; overflow: hidden; border-top: 0px; font-weight: normal; border-right: 0px; padding-top: 0px">Box-sizing: border-Box; border-bottom: 0px; border-left: 0px; padding-bottom: 0px; line-height: 30px; margin: 0px; outline-style: none; outline-color: invert; padding-left: 0px; outline-width: 0px; padding-right: 0px; font-family: 'Microsoft YaHei'; word-wrap: break-word; background: none transparent scroll repeat 0% 0%; font-size: 12pt; vertical-align: baseline; overflow: hidden; border-top: 0px; font-weight: normal; border-right: 0px; padding-top: 0px">Box-sizing: border-Box; border-bottom: 0px; border-left: 0px; padding-bottom: 0px; line-height: 30px; margin: 0px; outline-style: none; outline-color: invert; padding-left: 0px; outline-width: 0px; padding-right: 0px; font-family: 'Microsoft YaHei'; word-wrap: break-word; background: none transparent scroll repeat 0% 0%; font-size: 16px; vertical-align: baseline; overflow: hidden; border-top: 0px; font-weight: normal; border-right: 0px; padding-top: 0px">名称

Box-sizing: border-Box; border-bottom: rgb(221,102); font-size: 15px; vertical-align: baseline; overflow: hidden; border-top: 0px; font-weight: normal; border-right: 0px; padding-top: 0px">Box-sizing: border-Box; border-bottom: 0px; border-left: 0px; padding-bottom: 0px; line-height: 30px; margin: 0px; outline-style: none; outline-color: invert; padding-left: 0px; outline-width: 0px; padding-right: 0px; font-family: 'Microsoft YaHei'; word-wrap: break-word; background: none transparent scroll repeat 0% 0%; font-size: 12pt; vertical-align: baseline; overflow: hidden; border-top: 0px; font-weight: normal; border-right: 0px; padding-top: 0px">Box-sizing: border-Box; border-bottom: 0px; border-left: 0px; padding-bottom: 0px; line-height: 30px; margin: 0px; outline-style: none; outline-color: invert; padding-left: 0px; outline-width: 0px; padding-right: 0px; font-family: 'Microsoft YaHei'; word-wrap: break-word; background: none transparent scroll repeat 0% 0%; font-size: 16px; vertical-align: baseline; overflow: hidden; border-top: 0px; font-weight: normal; border-right: 0px; padding-top: 0px">描述

Box-sizing: border-Box; border-bottom: rgb(221,102); font-size: 15px; vertical-align: baseline; overflow: hidden; border-top: 0px; font-weight: normal; border-right: 0px; padding-top: 0px">Box-sizing: border-Box; border-bottom: 0px; border-left: 0px; padding-bottom: 0px; line-height: 30px; margin: 0px; outline-style: none; outline-color: invert; padding-left: 0px; outline-width: 0px; padding-right: 0px; font-family: 'Microsoft YaHei'; word-wrap: break-word; background: none transparent scroll repeat 0% 0%; font-size: 12pt; vertical-align: baseline; overflow: hidden; border-top: 0px; font-weight: normal; border-right: 0px; padding-top: 0px">compile

Box-sizing: border-Box; border-bottom: rgb(221,102); font-size: 15px; vertical-align: baseline; overflow: hidden; border-top: 0px; font-weight: normal; border-right: 0px; padding-top: 0px">Box-sizing: border-Box; border-bottom: 0px; border-left: 0px; padding-bottom: 0px; line-height: 30px; margin: 0px; outline-style: none; outline-color: invert; padding-left: 0px; outline-width: 0px; padding-right: 0px; font-family: 'Microsoft YaHei'; word-wrap: break-word; background: none transparent scroll repeat 0% 0%; font-size: 12pt; vertical-align: baseline; overflow: hidden; border-top: 0px; font-weight: normal; border-right: 0px; padding-top: 0px">指定一个编译函数

Box-sizing: border-Box; padding-bottom: 0px; line-height: 30px; border-right-width: 0px; margin: 0px; outline-style: none; outline-color: invert; padding-left: 0px; outline-width: 0px; padding-right: 0px; word-wrap: break-word; background: none transparent scroll repeat 0% 0%; border-bottom-width: 0px; font-size: 16px; vertical-align: baseline; overflow: hidden; border-top: rgb(204,102); font-size: 15px; vertical-align: baseline; overflow: hidden; border-top: 0px; font-weight: normal; border-right: 0px; padding-top: 0px">Box-sizing: border-Box; border-bottom: 0px; border-left: 0px; padding-bottom: 0px; line-height: 30px; margin: 0px; outline-style: none; outline-color: invert; padding-left: 0px; outline-width: 0px; padding-right: 0px; font-family: 'Microsoft YaHei'; word-wrap: break-word; background: none transparent scroll repeat 0% 0%; font-size: 12pt; vertical-align: baseline; overflow: hidden; border-top: 0px; font-weight: normal; border-right: 0px; padding-top: 0px">controller

Box-sizing: border-Box; border-bottom: rgb(221,102); font-size: 15px; vertical-align: baseline; overflow: hidden; border-top: 0px; font-weight: normal; border-right: 0px; padding-top: 0px">Box-sizing: border-Box; border-bottom: 0px; border-left: 0px; padding-bottom: 0px; line-height: 30px; margin: 0px; outline-style: none; outline-color: invert; padding-left: 0px; outline-width: 0px; padding-right: 0px; font-family: 'Microsoft YaHei'; word-wrap: break-word; background: none transparent scroll repeat 0% 0%; font-size: 12pt; vertical-align: baseline; overflow: hidden; border-top: 0px; font-weight: normal; border-right: 0px; padding-top: 0px">为指令创建一个控制器函数

Box-sizing: border-Box; padding-bottom: 0px; line-height: 30px; border-right-width: 0px; margin: 0px; outline-style: none; outline-color: invert; padding-left: 0px; outline-width: 0px; padding-right: 0px; word-wrap: break-word; background: rgb(247,102); font-size: 15px; vertical-align: baseline; overflow: hidden; border-top: 0px; font-weight: normal; border-right: 0px; padding-top: 0px">Box-sizing: border-Box; border-bottom: 0px; border-left: 0px; padding-bottom: 0px; line-height: 30px; margin: 0px; outline-style: none; outline-color: invert; padding-left: 0px; outline-width: 0px; padding-right: 0px; font-family: 'Microsoft YaHei'; word-wrap: break-word; background: none transparent scroll repeat 0% 0%; font-size: 12pt; vertical-align: baseline; overflow: hidden; border-top: 0px; font-weight: normal; border-right: 0px; padding-top: 0px">link

Box-sizing: border-Box; border-bottom: rgb(221,102); font-size: 15px; vertical-align: baseline; overflow: hidden; border-top: 0px; font-weight: normal; border-right: 0px; padding-top: 0px">Box-sizing: border-Box; border-bottom: 0px; border-left: 0px; padding-bottom: 0px; line-height: 30px; margin: 0px; outline-style: none; outline-color: invert; padding-left: 0px; outline-width: 0px; padding-right: 0px; font-family: 'Microsoft YaHei'; word-wrap: break-word; background: none transparent scroll repeat 0% 0%; font-size: 12pt; vertical-align: baseline; overflow: hidden; border-top: 0px; font-weight: normal; border-right: 0px; padding-top: 0px">为指令指定链接函数

Box-sizing: border-Box; padding-bottom: 0px; line-height: 30px; border-right-width: 0px; margin: 0px; outline-style: none; outline-color: invert; padding-left: 0px; outline-width: 0px; padding-right: 0px; word-wrap: break-word; background: none transparent scroll repeat 0% 0%; border-bottom-width: 0px; font-size: 16px; vertical-align: baseline; overflow: hidden; border-top: rgb(204,102); font-size: 15px; vertical-align: baseline; overflow: hidden; border-top: 0px; font-weight: normal; border-right: 0px; padding-top: 0px">Box-sizing: border-Box; border-bottom: 0px; border-left: 0px; padding-bottom: 0px; line-height: 30px; margin: 0px; outline-style: none; outline-color: invert; padding-left: 0px; outline-width: 0px; padding-right: 0px; font-family: 'Microsoft YaHei'; word-wrap: break-word; background: none transparent scroll repeat 0% 0%; font-size: 12pt; vertical-align: baseline; overflow: hidden; border-top: 0px; font-weight: normal; border-right: 0px; padding-top: 0px">replace

Box-sizing: border-Box; border-bottom: rgb(221,102); font-size: 15px; vertical-align: baseline; overflow: hidden; border-top: 0px; font-weight: normal; border-right: 0px; padding-top: 0px">Box-sizing: border-Box; border-bottom: 0px; border-left: 0px; padding-bottom: 0px; line-height: 30px; margin: 0px; outline-style: none; outline-color: invert; padding-left: 0px; outline-width: 0px; padding-right: 0px; font-family: 'Microsoft YaHei'; word-wrap: break-word; background: none transparent scroll repeat 0% 0%; font-size: 12pt; vertical-align: baseline; overflow: hidden; border-top: 0px; font-weight: normal; border-right: 0px; padding-top: 0px">指定模板内容是否替换指令所应用到的元素

Box-sizing: border-Box; padding-bottom: 0px; line-height: 30px; border-right-width: 0px; margin: 0px; outline-style: none; outline-color: invert; padding-left: 0px; outline-width: 0px; padding-right: 0px; word-wrap: break-word; background: rgb(247,102); font-size: 15px; vertical-align: baseline; overflow: hidden; border-top: 0px; font-weight: normal; border-right: 0px; padding-top: 0px">Box-sizing: border-Box; border-bottom: 0px; border-left: 0px; padding-bottom: 0px; line-height: 30px; margin: 0px; outline-style: none; outline-color: invert; padding-left: 0px; outline-width: 0px; padding-right: 0px; font-family: 'Microsoft YaHei'; word-wrap: break-word; background: none transparent scroll repeat 0% 0%; font-size: 12pt; vertical-align: baseline; overflow: hidden; border-top: 0px; font-weight: normal; border-right: 0px; padding-top: 0px">require

Box-sizing: border-Box; border-bottom: rgb(221,102); font-size: 15px; vertical-align: baseline; overflow: hidden; border-top: 0px; font-weight: normal; border-right: 0px; padding-top: 0px">Box-sizing: border-Box; border-bottom: 0px; border-left: 0px; padding-bottom: 0px; line-height: 30px; margin: 0px; outline-style: none; outline-color: invert; padding-left: 0px; outline-width: 0px; padding-right: 0px; font-family: 'Microsoft YaHei'; word-wrap: break-word; background: none transparent scroll repeat 0% 0%; font-size: 12pt; vertical-align: baseline; overflow: hidden; border-top: 0px; font-weight: normal; border-right: 0px; padding-top: 0px">声明对某个控制器的依赖

Box-sizing: border-Box; padding-bottom: 0px; line-height: 30px; border-right-width: 0px; margin: 0px; outline-style: none; outline-color: invert; padding-left: 0px; outline-width: 0px; padding-right: 0px; word-wrap: break-word; background: none transparent scroll repeat 0% 0%; border-bottom-width: 0px; font-size: 16px; vertical-align: baseline; overflow: hidden; border-top: rgb(204,102); font-size: 15px; vertical-align: baseline; overflow: hidden; border-top: 0px; font-weight: normal; border-right: 0px; padding-top: 0px">Box-sizing: border-Box; border-bottom: 0px; border-left: 0px; padding-bottom: 0px; line-height: 30px; margin: 0px; outline-style: none; outline-color: invert; padding-left: 0px; outline-width: 0px; padding-right: 0px; font-family: 'Microsoft YaHei'; word-wrap: break-word; background: none transparent scroll repeat 0% 0%; font-size: 12pt; vertical-align: baseline; overflow: hidden; border-top: 0px; font-weight: normal; border-right: 0px; padding-top: 0px">restrict

Box-sizing: border-Box; border-bottom: rgb(221,102); font-size: 15px; vertical-align: baseline; overflow: hidden; border-top: 0px; font-weight: normal; border-right: 0px; padding-top: 0px">Box-sizing: border-Box; border-bottom: 0px; border-left: 0px; padding-bottom: 0px; line-height: 30px; margin: 0px; outline-style: none; outline-color: invert; padding-left: 0px; outline-width: 0px; padding-right: 0px; font-family: 'Microsoft YaHei'; word-wrap: break-word; background: none transparent scroll repeat 0% 0%; font-size: 12pt; vertical-align: baseline; overflow: hidden; border-top: 0px; font-weight: normal; border-right: 0px; padding-top: 0px">指定指令如何使用ACEM

Box-sizing: border-Box; padding-bottom: 0px; line-height: 30px; border-right-width: 0px; margin: 0px; outline-style: none; outline-color: invert; padding-left: 0px; outline-width: 0px; padding-right: 0px; word-wrap: break-word; background: rgb(247,102); font-size: 15px; vertical-align: baseline; overflow: hidden; border-top: 0px; font-weight: normal; border-right: 0px; padding-top: 0px">Box-sizing: border-Box; border-bottom: 0px; border-left: 0px; padding-bottom: 0px; line-height: 30px; margin: 0px; outline-style: none; outline-color: invert; padding-left: 0px; outline-width: 0px; padding-right: 0px; font-family: 'Microsoft YaHei'; word-wrap: break-word; background: none transparent scroll repeat 0% 0%; font-size: 12pt; vertical-align: baseline; overflow: hidden; border-top: 0px; font-weight: normal; border-right: 0px; padding-top: 0px">scope

Box-sizing: border-Box; border-bottom: rgb(221,102); font-size: 15px; vertical-align: baseline; overflow: hidden; border-top: 0px; font-weight: normal; border-right: 0px; padding-top: 0px">Box-sizing: border-Box; border-bottom: 0px; border-left: 0px; padding-bottom: 0px; line-height: 30px; margin: 0px; outline-style: none; outline-color: invert; padding-left: 0px; outline-width: 0px; padding-right: 0px; font-family: 'Microsoft YaHei'; word-wrap: break-word; background: none transparent scroll repeat 0% 0%; font-size: 12pt; vertical-align: baseline; overflow: hidden; border-top: 0px; font-weight: normal; border-right: 0px; padding-top: 0px">为指令创建一个新的作用域或者一个隔离的作用域

Box-sizing: border-Box; padding-bottom: 0px; line-height: 30px; border-right-width: 0px; margin: 0px; outline-style: none; outline-color: invert; padding-left: 0px; outline-width: 0px; padding-right: 0px; word-wrap: break-word; background: none transparent scroll repeat 0% 0%; border-bottom-width: 0px; font-size: 16px; vertical-align: baseline; overflow: hidden; border-top: rgb(204,102); font-size: 15px; vertical-align: baseline; overflow: hidden; border-top: 0px; font-weight: normal; border-right: 0px; padding-top: 0px">Box-sizing: border-Box; border-bottom: 0px; border-left: 0px; padding-bottom: 0px; line-height: 30px; margin: 0px; outline-style: none; outline-color: invert; padding-left: 0px; outline-width: 0px; padding-right: 0px; font-family: 'Microsoft YaHei'; word-wrap: break-word; background: none transparent scroll repeat 0% 0%; font-size: 12pt; vertical-align: baseline; overflow: hidden; border-top: 0px; font-weight: normal; border-right: 0px; padding-top: 0px">template

Box-sizing: border-Box; border-bottom: rgb(221,102); font-size: 15px; vertical-align: baseline; overflow: hidden; border-top: 0px; font-weight: normal; border-right: 0px; padding-top: 0px">Box-sizing: border-Box; border-bottom: 0px; border-left: 0px; padding-bottom: 0px; line-height: 30px; margin: 0px; outline-style: none; outline-color: invert; padding-left: 0px; outline-width: 0px; padding-right: 0px; font-family: 'Microsoft YaHei'; word-wrap: break-word; background: none transparent scroll repeat 0% 0%; font-size: 12pt; vertical-align: baseline; overflow: hidden; border-top: 0px; font-weight: normal; border-right: 0px; padding-top: 0px">指定一个将被插入到HTML文档的模板

Box-sizing: border-Box; padding-bottom: 0px; line-height: 30px; border-right-width: 0px; margin: 0px; outline-style: none; outline-color: invert; padding-left: 0px; outline-width: 0px; padding-right: 0px; word-wrap: break-word; background: rgb(247,102); font-size: 15px; vertical-align: baseline; overflow: hidden; border-top: 0px; font-weight: normal; border-right: 0px; padding-top: 0px">Box-sizing: border-Box; border-bottom: 0px; border-left: 0px; padding-bottom: 0px; line-height: 30px; margin: 0px; outline-style: none; outline-color: invert; padding-left: 0px; outline-width: 0px; padding-right: 0px; font-family: 'Microsoft YaHei'; word-wrap: break-word; background: none transparent scroll repeat 0% 0%; font-size: 12pt; vertical-align: baseline; overflow: hidden; border-top: 0px; font-weight: normal; border-right: 0px; padding-top: 0px">templateUrl

Box-sizing: border-Box; border-bottom: rgb(221,102); font-size: 15px; vertical-align: baseline; overflow: hidden; border-top: 0px; font-weight: normal; border-right: 0px; padding-top: 0px">Box-sizing: border-Box; border-bottom: 0px; border-left: 0px; padding-bottom: 0px; line-height: 30px; margin: 0px; outline-style: none; outline-color: invert; padding-left: 0px; outline-width: 0px; padding-right: 0px; font-family: 'Microsoft YaHei'; word-wrap: break-word; background: none transparent scroll repeat 0% 0%; font-size: 12pt; vertical-align: baseline; overflow: hidden; border-top: 0px; font-weight: normal; border-right: 0px; padding-top: 0px">指定一个将被插入到HTML文档的外部模板

Box-sizing: border-Box; padding-bottom: 0px; line-height: 30px; border-right-width: 0px; margin: 0px; outline-style: none; outline-color: invert; padding-left: 0px; outline-width: 0px; padding-right: 0px; word-wrap: break-word; background: none transparent scroll repeat 0% 0%; border-bottom-width: 0px; font-size: 16px; vertical-align: baseline; overflow: hidden; border-top: rgb(204,102); font-size: 15px; vertical-align: baseline; overflow: hidden; border-top: 0px; font-weight: normal; border-right: 0px; padding-top: 0px">Box-sizing: border-Box; border-bottom: 0px; border-left: 0px; padding-bottom: 0px; line-height: 30px; margin: 0px; outline-style: none; outline-color: invert; padding-left: 0px; outline-width: 0px; padding-right: 0px; font-family: 'Microsoft YaHei'; word-wrap: break-word; background: none transparent scroll repeat 0% 0%; font-size: 12pt; vertical-align: baseline; overflow: hidden; border-top: 0px; font-weight: normal; border-right: 0px; padding-top: 0px">transclude

Box-sizing: border-Box; border-bottom: rgb(221,102); font-size: 15px; vertical-align: baseline; overflow: hidden; border-top: 0px; font-weight: normal; border-right: 0px; padding-top: 0px">Box-sizing: border-Box; border-bottom: 0px; border-left: 0px; padding-bottom: 0px; line-height: 30px; margin: 0px; outline-style: none; outline-color: invert; padding-left: 0px; outline-width: 0px; padding-right: 0px; font-family: 'Microsoft YaHei'; word-wrap: break-word; background: none transparent scroll repeat 0% 0%; font-size: 12pt; vertical-align: baseline; overflow: hidden; border-top: 0px; font-weight: normal; border-right: 0px; padding-top: 0px">指定指令是否被用于包含任意内容

"); if(element[0].nodeName == "#comment"){ element.parent().append(listElem); }else{ element.append(listElem); } for(var i=0,len=data.length; i').text(scope.$eval(propertyName,data[i])); listElem.append(itemElem); } } },restrict:'EACM' }; });

如何使用指令

当作元素使用(E)

当unordered-list当作元素使用,需要添加另外的属性代替unordered-list属性的作用。

当作属性使用(A)

当作类的属性值使用(C)

当作注释使用(M)

使用模板指令

  • {{item.price | currency}}
  • " }; });

    使用函数作为模板

    template属性除了使用字符串,也可以指定一个函数生成模板化的内容。该函数传入两个函数(指令所应用到的元素以及属性集合)并返回将被插入到文档中的HTML代码片段。

  • 使用外部模板

    itemTemplate.html

    This is the form the template file

    通过函数选择一个外部模版

    tableTemplate.html

    Name
    Price