Angular JS 入门（二）

上次的遗留问题：一个页面是否能加载多个ng-app

这个是可以实现的，但是页面上自动加载只会加载第一个ng-app，其他的ng-app需要自己手动加载。

加载方法：给某个对象指定某个moudle

angular.bootstrap(document.getElementById("app2"), ['myApp2']); 

完整代码如下:

 
 
 
 
 
 
 
 

 
名: 

 
姓: 

 姓名: {{firstName + " " + lastName}}
 
 

 名: 

 姓: 

 姓名: {{firstName + " " + lastName}}
 
 
 
 
 

ng-repeat 指令：
ng-repeat顾名思义就是用来循环用的，相当于js的for循环

代码如下：

 
 
 
 
 
 
 
 
 
 
 







 
姓名
年龄
 
 
 
{{x.name}}
 
{{x.age}}
 
 
 
 
 
 
 
 
 
 

 
 

页面效果：

repeat.png

自定义指令

自定义指令声明跟controller的声明方式是一样的，使用.directive

自定义指令命名使用骆驼命名法，如sayHello, 使用的时候需要在驼峰前加上短横线-，如say-hello

指令声明中的template返回html

指令声明中的restrict表示指定调用的方式,包括E，A，C，M，可为多个，直接拼接就行，如restrict="EACM"

 Element:
 Class:
 Attribute: 
 M注释:
 

指令声明中的replace，为true则表示原元素替换为template，为false则为内置html。默认为false，但是restrict为M的时候必须声明replace为true

完整代码：

 
 
 
 
 
 
 
 
 
 
 







 
姓名
年龄
 
 
 
{{x.name}}
 
{{x.age}}
 
 
 
 
 

 
 
Element:
 Class:
 Attribute: 
 M注释:
 
 
 
 
 

 
 

页面效果：

directive.png