<b>上次的遗留问题：一个页面是否能加载多个ng-app</b>
这个是可以实现的，但是页面上自动加载只会加载第一个ng-app，其他的ng-app需要自己手动加载。
<b>加载方法：给某个对象指定某个moudle</b>
<pre>angular.bootstrap(document.getElementById("app2"), ['myApp2']); </pre>
<b>完整代码如下:</b>
<pre>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="myApps" >
<div ng-controller="myCtrl">名: <input type="text" ng-model="firstName" >
</div>
<div ng-controller="myCtrl1">姓: <input type="text" ng-model="lastName">
</div>
姓名: {{firstName + " " + lastName}}
</div>
<div id="app2Id" ng-app="myApp2" ng-controller="myCtrl2">
名: <input type="text" ng-model="firstName">
姓: <input type="text" ng-model="lastName">
姓名: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApps', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "Zor";
}).controller('myCtrl1', function($scope) {
$scope.lastName= "OY";
});
var app2 = angular.module('myApp2', []);
app2.controller('myCtrl2', function($scope) {
$scope.firstName= "Lily";
$scope.lastName= "Huang";
});
<b> angular.bootstrap(document.getElementById("app2Id"), ['myApp2']); </b>
</script>
</body>
</html>
</pre>
<b>ng-repeat 指令：
ng-repeat顾名思义就是用来循环用的，相当于js的for循环</b>
代码如下：
<pre>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="myApps" ng-controller="myCtrl">
<table ng-module="employeeList">
<thead><tr><th>姓名</th><th>年龄</th></tr></thead>
<tbody>
<tr ng-repeat="x in employeeList">
<td>{{x.name}}</td>
<td>{{x.age}}</td>
</tr>
</tbody>
</table>
</div>
<script>
var app = angular.module('myApps', []);
app.controller('myCtrl', function($scope) {
$scope.employeeList= [{name:'Annie',age:18},
{name:'Amy',age:100},
{name:'Lucky',age:20},
{name:'May',age:20}];
});
</script>
</body>
</html>
</pre>
页面效果：
repeat.png
<b>自定义指令</b>
<li>自定义指令声明跟controller的声明方式是一样的，使用.directive</li>
<li>自定义指令命名使用骆驼命名法，如sayHello, 使用的时候需要在驼峰前加上短横线-，如say-hello</li>
<li>指令声明中的template返回html</li>
<li>指令声明中的restrict表示指定调用的方式,包括E，A，C，M，可为多个，直接拼接就行，如restrict="EACM"</li>
<pre>
Element:<i><show-young-woman></show-young-woman></i>
Class:<i class="show-young-woman"></i>
Attribute: <i show-young-woman></i>
M注释:
</pre>
<li>指令声明中的replace，为true则表示原元素替换为template，为false则为内置html。默认为false，但是restrict为M的时候必须声明replace为true
</li>
完整代码：
<pre>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="myApps" ng-controller="myCtrl">
<table ng-module="employeeList">
<thead><tr><th>姓名</th><th>年龄</th></tr></thead>
<tbody>
<tr ng-repeat="x in employeeList">
<td>{{x.name}}</td>
<td>{{x.age}}</td>
</tr>
</tbody>
</table>
Element:<i><show-young-woman></show-young-woman></i>
Class:<i class="show-young-woman"></i>
Attribute: <i show-young-woman></i>
M注释:
</div>
<script>
var app = angular.module('myApps', []);
app.controller('myCtrl', function($scope) {
$scope.employeeList= [{name:'Annie',age:18},
{name:'Amy',age:100},
{name:'Lucky',age:20},
{name:'May',age:20}];
}).directive('showYoungWoman', function() {
return{
restrict: 'ECAM',
replace:true,
template:'<h1>Young woman:{{employeeList[0].name}}</h1>'
}
});
</script>
</body>
</html>
</pre>
页面效果：
directive.png
网友评论