本文实例讲述了Angular1.x复杂指令。分享给大家供大家参考，具体如下：
| 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; 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">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
如何使用指令 当作元素使用（E） 当unordered-list当作元素使用，需要添加另外的属性代替unordered-list属性的作用。 当作属性使用（A） 当作类的属性值使用（C） 当作注释使用（M） 使用模板指令 使用函数作为模板 template属性除了使用字符串，也可以指定一个函数来生成模板化的内容。该函数传入两个函数（指令所应用到的元素以及属性集合）并返回将被插入到文档中的HTML代码片段。 使用外部模板 itemTemplate.html This is the form the template file
通过函数选择一个外部模版 tableTemplate.html Price |
table-striped样式并没有起作用，设置replace属性为true后的效果是模版内容将替换掉指令所应用到的div元素。 管理指令的作用域 为每个指令实例创建自己的作用域 设置scope属性为true将允许我们在同一个控制器里复用这个指令,可以避免指令共享数据值。 data.name这个属性是在一个对象上定义的，意味着这个值将会在指令的哥哥实例之间所共享，而且所有相应的视图会同步更新。 city是直接在控制器的作用于上被直接赋值的，意味着这个值只在此指令的作用域上有效。 创建隔离的作用域 对于在一个对象上定义的属性，可能会被其他人改变。解决方法就是创建一个隔离的作用域，就是Angularjs为指令的每个实例创建一个独立的作用域的地方，但是这个作用域并不继承自控制器的作用域。当scope定义属性被设置为一个对象时，可创建一个隔离的作用域。隔离的作用域的最基本类型是用一个没有属性的对象表示。 当创建在不同情况下复用的指令时，隔离的作用域是一种重要的构件时。因为它防止了在控制器作用域和指令之间出现了意料外的交互。但是完全隔绝一个指令会使得难以输入和输出数据。 隔绝的作用域允许使用应用于指令旁边的元素上的属性将数据值绑定到控制器作用域上。 单向绑定@： 向以@为前缀的作用域对象上增添一个属性，以在一个隔离的作用力创建一个单向绑定。 |
|---|
