ng-controller多控制器思想
为了便于团队开发和维护
（1）每一个控制器是嵌套的,即外层控制器可以访问内层控制器变量
（2）习惯上mainController作为用户默认加载页面的根控制器有且仅有一个
代码示例:
<html ng-app='app' ng-controller='main' >
<head>
<meta charset="utf-8">
<meta name='viewport' content='width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0'>
<title ></title>
<script src='js/underscore.js'></script>
<!-- 引入百度地图 -->
<script src='js/angular.js'></script>
<style>
</style>
</head>
<body >
<br/><br/><br/>
<div class='container' ng-controller='commentController'>
<div class='row'>
<!-- 利用栅格进行div布局,12格中取6格,并且x方向偏移三格 -->
<div class='col-xs-6 col-xs-offset-3'>
<!-- 使用bootstrap框架引入输入组(输入框和按钮紧邻水平排列) -->
<div class='input-group'>
<input type="text" class='form-control' ng-model='comt'>
<span class='input-group-btn'>
<button class='btn btn-primary' ng-click='submitComment(comt)'>评论</button>
</span>
</div>
<!-- 评论标题 -->
<h2 ng-show='commentArr.length!=0'>评论:</h2>
<!-- 评论内容 -->
<!-- ul 和 li使用了输入组的方法,使得之后的li在之前li的下面排列 -->
<ul class='list-group'>
<!-- 在这里 $index始终是该li的序号,而不是指最后一个li下标,因为每次传入的$index指定,指令内的函数(),相当于直接调用函数,参数值固定了 -->
<!-- 使用ng-repeat创建的元素,如果控制器内对应的变量被删掉,则整个标签消失 -->
<li class='list-group-item' ng-repeat='comment in commentArr track by $index'>
<span>{{comment}}</span>
<a href="javascript:;" class='btn btn-danger' ng-click='deleteComment($index)'>删除本条评论</a>
</li>
</ul>
</div>
</div>
</div>
<ul ng-controller='nameListController'>
<li ng-repeat='liInfo in liInfos track by $index'>{{liInfo}}</li>
</ul>
<script>
//根控制器
var app=angular.module('app',[]);
app.controller('main',['$scope',function($scope){
}]);
//评论控制器
app.controller('commentController',['$scope',function($scope){
$scope.commentArr=[];
//评论功能
$scope.submitComment=function(comt)
{
$scope.commentArr.push(comt);
$scope.comt='';
}
//删除评论功能
$scope.deleteComment=function(index)
{
//删除评论的几种方法
/*
1、$scope.commentArr.splice(index,1);
2、$scope.arr=_.without($scope.commentArr,$scope.commentArr[index]);
$scope.commentArr=$scope.arr;
*/
$scope.commentArr.splice(index,1);
}
}]);
//名称列表控制器
app.controller('nameListController',['$scope',function($scope){
$scope.liInfos=['l','li','lic'];
}]);
</script>
</body>
</html>
